Jump to content

Not working anymore - Center Align Social Links Icons on Mobile Code

Recommended Posts

Posted (edited)

Hi all,

I'm trying to center the social link Icons only in mobile with code. 
Up until 2 days ago this worked perfectly with the following code:

@media screen and (max-width:640px) {
div#block-8848eabd2318998ac7f2 * {
    text-align: center !important;
}
}


I once tried this code, which also worked: 
 

/* Right alignment for desktop */
div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
  text-align: right;
}

/* Center alignment for mobile devices */
@media only screen and (max-width: 640px) {
  div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
    text-align: center !important;
  }
}

However, as of two days ago, the icons will not center anymore on mobile using this code.
I've deleted the whole page and rebuilt it. I've tried new templates with the same code.
I've searched various tutorials and applied the codes provided.
Text is affected, but the icons remain unaffected.

What am I missing?

Thanks for any help provided.

Link: https://ravens-2.squarespace.com
Password: Ravens-1

Edited by bybelser
Link to comment
  • Replies 2
  • Views 305
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)

Edit: Chatgpt just helped me with this code and it works half ways:

/* Right alignment for desktop */
div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
}

/* Center alignment for mobile devices */
@media only screen and (max-width: 640px) {
    div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
        justify-content: center; /* Centers items */
    }
}


Result: It's now at least semi-centered but not perfectly
 

Example 1: Centered with Code

Screenshot2024-05-12at14_29_39.thumb.png.2a51f34b012e26942bc7490028d78b52.png

Example 2: Centered traditionally 
Screenshot2024-05-12at14_32_49.thumb.png.d789dd37d97871071039eff4ed5fe1ef.png
It's subtle but still noticeable.

To make it work perfectly centered I need to add the following code and I can't imagine this is the correct way to do it: 

@media only screen and (max-width: 640px) {
    div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
        display: flex;
        justify-content: center;
        transform: translateX(-6px); /* Adjust as needed */
    }
}

__________________________________________________________________________


Second: 

Just out of curiosity, why does the other solution not work anymore?
There are multiple forum posts, pointing to this solution. Also with me it worked perfectly up until 2 days ago.
Did Squarespace change something?
I tried everything, even created a completely new Squarespace account and followed the guidelines posted below to the dot without results.

Here are some examples pointing to the solution that previously worked but now not anymore: 

 https://www.risingtidecreatives.com/blog/center-align-text-buttons-mobile-squarespace

etc.

Edited by bybelser
Added relevant information with screenshots
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.