Small icons look wrong on a mobile device

Site URL: https://oval-parrot-2ebm.squarespace.com/

I'm using the BEDFORD templated. The resizing and stacking of graphics on the mobile device looks silly. (I have some small icon pictures below to text on the desktop that are resized to be quite large relative to the text, on mobile) I do want to keep the icons on the desktop version, if possible. How do I create a desktop version that keeps the graphics and a mobile version that omits them or keeps them small? 

Site is in the process of going live so including screen grabs here.

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

Hello @tuanphan, my unpublished site does the same with small icons - correct size on a desktop but then on the mobile, it blows up - please see the backpack below. Have tried the code above with my block id but no luck ... 

on mobile view

Thank you so much for your help!

On 4/19/2022 at 12:42 AM, heiiidii said:

Hello @tuanphan, my unpublished site does the same with small icons - correct size on a desktop but then on the mobile, it blows up - please see the backpack below. Have tried the code above with my block id but no luck ... 

on mobile view

 

 

Thank you so much for your help!

Hi. Please share link to your site. If the site is trial/private, just setup password & share url.

We can check easier