Images not sizing across different views

Hello,

I am having trouble getting the correct sizing between the 2 images in the Hero at the top. Everytime I change the view one gets smaller or larger. I would like the frame on the left with the title of Airbrush Tanning to automatically resize to the size of the image as you change different views. Also, when you go to the different pages within the site, a weird page loads without any images then loads the full page and then the header acts up and does not show the drop down menu.

https://beachbumtanningeastbrunswick.com/airbrush-tanning/

Hi Jonathan,

Thank you for reaching out to us. This is the default behavior of the image responsiveness. Your image has more width than height so the image maintains it’s aspect ratio in all screen sizes thus gets smaller when the screen is resized.

You probably need a different approach here to make both columns of same height, please follow any of the method here:

Now instead of using an image element in the right column, set it as a background image of the column, now both will have the same height but this method has a catch, by default the background-size property is set to cover so your image will cut off when the screen is resized but that’s a better approach

  • I checked your other pages and couldn’t replicate the issue on my end, this could only be the cache issue, try clearing all caches including your browser’s cache and see if this resolves the issue

Hope this helps!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.