Hello there,
I’m having trouble with the mobile view of my blog’s home page. I want the images of the blog posts to be the same size, but they get distorted. On landscape and mobile, I want the images to be the same size and encompass the ‘blog content’ wrapper. If anyone has a minute to spare, I would really appreciate it!
Hey @eatingpurposefully22 I would recommend doing your layout a bit differently. Instead of using columns just set your parent Post Content div to display flex:
Then set some padding and margin that works at desktop like this:
I would then use two divs, those will be the flex-children of the Post Content div, name these however you like:
In the image div set the flex basis to 33.3333% or something like that and give it some right margin:
Then place your image from your blog post inside of that div:
The content div can be left alone at this breakpoint, just put in your title and summary:
You shouldn’t have to change anything on tablet for this type of layout:
I will say that potentially learning about grid or learning a bit more about the way HTML layouts work in general could go a long way. Understanding the relationship between the parent’s display property and the children is super important. Maybe check out this guide for further learning: Display settings | Webflow University
Okay, I just got back from trying it. The images look so much better now! But when I added the two div blocks, it did not turn out how you have it. What am I doing wrong? And since there is a lot of empty white space with small pictures and not enough space with larger pictures, is there a way to make all of the images the same size?
