Reflowing content / Adding media query?


Im trying to figure out a way to make the content reflow nicely. It starts to look a bit wack around 1440px.

Is there a way to do this with grid or any setting within webflow designer or do i need media queries? I’m still pretty new to webflow so i’d appreciate any help if media queries are needed.

Share link:

Thank you

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

It looks fine at each break point already.
FOr those in between cases, you’ll need to put things in more divs - group things and then change the divs to flex and change the horizontal and vertical layout as required

Hi @Jonathan_Holden,
Thanks your reply! I’ve been trying to rearrange the content into divs and groups so it reflows correctly, although i can’t quite figure it out yet. If i arrange the content into more divs so that it looks correctly in the ‘in between cases’ it doesn’t look correctly at the larger size.

Could you offer any tips on how to rearrange the content so that it reflows nicely?

I hope this makes sense. I’m new to webflow so i’m still getting used to it.

Thanks for your help!

Hey Sheila

I went for grid in the end… it keeps things separate nicely with the grid spacing.
Here’s a (long and rambling) video of what I did…

Hi @Jonathan_Holden,

Thanks for taking the time to help me out! It looks a lot more sleek now!

Appreciate your help :+1:t2: :blush:

Ha ha ha… I struggled for a long time with Grid (still do sometimes) so I’m really happy to be able to help other people. It’s definitely a sleek looking site! Well done!

Cheers. I have zero code knowledge and this the first site i’ve done so it’s definitely been a process/struggle. :joy: This forum is a great help though!

1 Like

The forum is SUCH a wonderful place to hang!

Don’t forget to change the max width of the RTE wrapper in mobile portrait…

Are you going to change the Podcasts page to a nice Grid too?

And even the social links in the footer could be a nice 3 col 2 row grid with centered elements (and then you avoid issues like adding “first” and “end” to the classes :wink:) ((also don’t forget to add the interactions that you’ve got for the social icons in the header))

Far be it from me to critique your design, but it’s not completely clear when we are on the Current page (not enough bold? or maybe that lovely pink border line like for pink link?? )

By all means critique the design, I welcome any constructive feedback! Thank you!
I’m slowly working through your recommendations. :blush:

If you don’t mind could i ask you a quick question? On the podcast page i’ve added an instant on page search bar. When there is no results it appears as a blank page. I would love simple placeholder text to appear stating ‘no result’ or something to that affect. I’ve used custom code for the search bar. Any chance you would know what code to add to get the desired placeholder text. If this is too complicated of a task please ignore it.

I’m not a custom code person… but you’ll get your answer here if you put it on a new post!

No problem. I’ve created a post this morning but I thought i’d chance my luck anyway :joy:

Thanks for your help and advice!

Hi @Jonathan_Holden,

I was wondering if you could help me out again. The display of my site seems to be very blown up. I’m using a 13inch macbook. I have no idea what i done to it. I think i must have been working at 80% :woman_facepalming:t3: Do you know how i would go about fixing this?

Sorry Sheila I’m not sure what you mean. It’s looking great to me at all sizes.

(also, if it’s a new problem, you’re best to add it as a new post - I missed the notification about this one until just now)

Hi @Jonathan_Holden,

Please ignore me. I had a little freak out moment :joy: I think i was working with my screen minimised to 80% then when i published the site everything was enlarged but i corrected it since. A 13inch macbook doesn’t seem to be the easiest screen to work size from

1 Like