Streaming live at 10am (PST)

Content layout not responsive


#1

Hi All,
In my blog post templates I’m trying to get the content placeholders that I’ve added centered and responsive so it doesn’t shift. Right now the content shifts over when switching from desktop to mobile. Does anyone know how to fix this?

Here’s my read only.

https://preview.webflow.com/preview/blog-1-324f36?preview=2931a64aaca3436d85c5da8ad545f4e9

Thanks!


#2

Hi @Ashley_Janelle

There is 150 left padding on your div block 26 - remove/change that and you should see better results :slightly_smiling_face:

Great hero image by the way - but it is 3.6mb and needs to be wayyy smaller - in the 200-300kb range - then it should load much faster.

Hope that helps


#3

Thanks for the help @StuM . I removed the padding but its still not centered.


#4

It has solved it on the tablet/mobile views, but not desktop…easy fix though…

Div Block 26 on the desktop just needs the flex setting changed from align:stretch to align:center


#5

oh I got it thank you. How can I do the same of the text at the bottom? right now it doesn’t have the padding on the sides and goes to the edge.


#6

Which part do you mean - the ‘About Ashley’ section on mobile?

There is some 66 right padding and 10 left which will make a difference, but you can also click the center option in Typography, depending how you want to center/pad it…


#7

It looks fine on mobile desktop is where it runs edge to edge…


#8

I’ll need some screenshots to help here - so we are looking at the right element…

If something is running edge to edge it’s usually due to stretch, rather than centering, or having no padding/margin, or needing a 90% width instead of auto/100%