@timmse When creating a blog post, everything works fine, but some images don’t show properly on mobile. So the image is shown well on the homepage and on the category page, but on the blog page itself it is kind of zoomed in so that you can’t see everything properly. How can I fix this?
The page: Top 40 vieze zoekopdrachten naar Sylvana IJsselmuiden
Example of what I mean:
This is where things go wrong on the blog page itself
On the homepage its oke:
Near as I can see on your layout, your container has a min-height property set to 520px, while your background image is set to cover…
Your background image will never decrease in height below 520px, making it’s horizontal width wider than the mobile device in question…
A solution that I have previously used, if needed to be a background image, figure out the percentage ratio of the image height / width, set the container to height: 0 and padding-bottom: equal to percentage
Maybe that helps?
First of all, thanks for your help, but I don’t quite understand. How do I determine the percentage ratio of the image heath / width?
No problem, you take the image height and divide it by the image width, than multiply by 100 to get the percentage.
For example, if your image is 1920px x 1080px, you would divide 1080 by 1920 that would equal .5625, then you multiply that by 100 and that would equal 56.25, that is the percentage of the image height to its width.
