Small icons look wrong on a mobile device

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5e2b597fafedbe470451a506>.row:nth-child(3)>.span-2 {
    width: 20% !important;
    float: left !important;
}
}

I did and adjusted the size to 60% and it is looking good, but cannot get it to shift more to center.

I am enclosing a sample. Thank you.

11 hours ago, ROBRAS said:

I did and adjusted the size to 60% and it is looking good, but cannot get it to shift more to center.

I am enclosing a sample. Thank you.

 

edit above to this

@media screen and (max-width:640px) {
div#page-5e2b597fafedbe470451a506>.row:nth-child(3)>.span-2 {
    width: 60% !important;
    float: none !important;
    margin: 0 auto !important;
}
}

Hello @tuanphan,

Sorry that I will sound very ignoratant but should I edit anything in the code you've given? I was thinking that maybe I should edit div#page-5e..... section but I am not sure how to do so. 

Can you please guide?

Thank a lot!

59 minutes ago, neones17 said:

Hello @tuanphan,

Sorry that I will sound very ignoratant but should I edit anything in the code you've given? I was thinking that maybe I should edit div#page-5e..... section but I am not sure how to do so. 

Can you please guide?

Thank a lot!

WHat is your problem? Can you share link to your site?

6 hours ago, tuanphan said:

WHat is your problem? Can you share link to your site?

Hello,

My website is bexconsultancy.co.uk

I have the same issue. The icons are big and left positioned and I couldn't use the code you've shared.

11 hours ago, neones17 said:

Hello,

My website is bexconsultancy.co.uk

I have the same issue. The icons are big and left positioned and I couldn't use the code you've shared.

Add to Home > Design > Custom CSS

/* resize mobile icons */
@media screen and (max-width:767px) {
div#page-section-5fcb8cd9551bdc47e7aa41fb .image-block {
    margin: 0 auto;
    width: 30%;
}
div#page-section-5fcb8cd9551bdc47e7aa41fb * {
    text-align: center;
}
}

@tuanphan you are very nice sharing your knowledge. Can I know how you get the page-section- info? like the last message you posted, I see the large combination of numbers and letter is different for sites. Thanks.

5fcb8cd9551bdc47e7aa41fb

There is a Chrome extension that identifies Squarespace blocks. A block has a number similar to the one posted. It takes some experience to know which block id is added to the code, use the wrong one on a page and at best the code will not work, at worse, the page breaks, ie cursor won't do anything, page won't scroll things like that. 

.

9 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* resize mobile icons */
@media screen and (max-width:767px) {
div#page-section-5fcb8cd9551bdc47e7aa41fb .image-block {
    margin: 0 auto;
    width: 30%;
}
div#page-section-5fcb8cd9551bdc47e7aa41fb * {
    text-align: center;
}
}

 

You, sir, are amazing! Thanks a lot for this! 

17 hours ago, LotNotes said:

@tuanphan you are very nice sharing your knowledge. Can I know how you get the page-section- info? like the last message you posted, I see the large combination of numbers and letter is different for sites. Thanks.

5fcb8cd9551bdc47e7aa41fb

Try 

• https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
• or
• https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde