How to center content across breakpoints

Design help General
1

Hello,

I’m creating a website but I would like everything to be center when being displayed on other devices such as tablet, mobile.

The social icons I managed to to center by just aligning them but this doesn’t seem to be work for other parts of my website for e.g the phone number/email div or the logo

https://preview.webflow.com/preview/wrapituk?preview=3d22231776e611ec171fbf94aff4c9cd

Hope you can help.

Best regards,
Matt

2

https://v.usetapes.com/YQe0lBGfEo

I let Superman2 play in the background :slight_smile:

3

haha thanks for quick reply!

That worked a treat, although in mobile view its not really center? its more to the right even tho I’ve aligned in correctly?

Also for some reason when I view the site in tablet mode the phone and email div gets put onto another line, I thought if the width was auto it shouldn’t do this?

Thanks again!

Matt

4

Because you’ve put a left padding to the brand or image, remove it, it won’t affect the upper breakpoints (tablet and desktop) It only affects descending, and if no property has been set.

5

It’s because it has not the room needed in the table columns. Select your table and increase the col dimension like this:

http://vincent.polenordstudio.fr/snap/vfxu9.jpg

I checked, it’s not affecting desktop or the mobile breakpoints.

6

When that happens, the first thing you have to do is select the element and check for margins, padding, or position values. Then if you find nothing, select the parent (up arrow) and do the same. And repeat until you find a property that’s in the way of your design. If you hover the margin/padding arrows you highlight the margin or padding, so it’s quite easy to debug.

Here for the method :smile: It’s actually the very same method you use when you inspect a page in the browser inspector, you select and element and check the properties, and go up, or down, in the hierarchy.

Press “?” for the keyboard shortcuts. Check how to use the arrow keys to navigate into the hierarchy. There’s also the hierarchy at the bottom of the screen. Those two are your best friends :slight_smile:

7

Thanks, that makes a little sense. I will make it my mission to spend atleast an hour trying to debug an error before coming to you :wink:

8

Make that 5 minutes and you’re going to be fine :smiley:

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.