What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Thinking I need to redesign two elements in order to have them display properly on different devices... help?

I have an image that slides in from the left on my index page. In order to have the text underneath the boom, I have the text and the image on different axes. However, this seems to be very problematic when it comes to different screen sizes because the text moves up and down quite a bit depending on the screen size. I was in the process of creating multiple breakpoints (oh my god there are so many) when I thought maybe there would be a better way to have the text and the image all adjust in relation to each other. The reason it's a little tricky is because the image and the text overlap, as mentioned (you'll see what I'm talking about when you look at the site).
Anyway...

codepen: https://codepen.io/arpunk/pen/vYLbvOG

site: www.productionsound.net

Is there a better way to code the image/text?
Thank you!
 
Back
Top