Jump to content

Center align icons in mobile view

Recommended Posts

  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

Okay. It looks like you have some CSS that sets the height of the 3 icons, which is:

#block-c0976187c4866e4a353f {
    height: 250px;
    width: 350px;
    margin: auto;
}

When you're on a mobile that has width of less than 350px the icons are bigger than the screen. They are also off centre at multiple break points, e.g. 900px.

Instead of fixing the width, I suggest allowing the width to auto-size & adding a max-width so they don't get too big. So the custom CSS would be:

#block-c0976187c4866e4a353f,
#block-512d56e19c86b1e3eb0c,
#block-9e3eeb8fd2a624874a2f {
    width: auto;
    height: auto;
    margin: auto;
    max-width: 350px;
}

If you added the height/width CSS above, you will need to replace it with this. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.