Streaming live at 10am (PST)

Home Page Mobile View is Driving Me Nuts

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!


Here is my site Read-Only: https://preview.webflow.com/preview/magalis-fresh-project?utm_medium=preview_link&utm_source=designer&utm_content=magalis-fresh-project&preview=e86f783814f99017e76498a95fcdc12a&mode=preview

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:

image

image

Then set some padding and margin that works at desktop like this:

image

I would then use two divs, those will be the flex-children of the Post Content div, name these however you like:

image

In the image div set the flex basis to 33.3333% or something like that and give it some right margin:

image

Then place your image from your blog post inside of that div:

image

The content div can be left alone at this breakpoint, just put in your title and summary:

image

You shouldn’t have to change anything on tablet for this type of layout:

But on phone landscape you’ll need to make a few adjustments.

Set Post Content to Wrap in the flexbox properties:

image

And then on the image wrapper set the flex basis to 100%:

image

Remove the right margin and maybe add some bottom margin:

image

That should get you to a layout like this:

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: https://university.webflow.com/article/display-settings

Thank you so much! I really appreciate you taking the time to guide me step-by-step. I’m going to give this a try.

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?

Here is the read only link, after making the changes: https://preview.webflow.com/preview/magalis-fresh-project?utm_medium=preview_link&utm_source=designer&utm_content=magalis-fresh-project&preview=e86f783814f99017e76498a95fcdc12a&mode=preview