Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Small icons look wrong on a mobile device


ROBRAS
Go to solution Solved by tuanphan,

Question

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.

 

Screen Shot 2020-04-19 at 8.35.39 PM.png

Screen Shot 2020-04-19 at 8.35.29 PM.png

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 !import

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

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

Posted Images

11 answers to this question

Recommended Posts

  • 0

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;
}
}

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

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!

Link to post
  • 0
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?

Link to post
  • 0
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.

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

@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
Link to post
  • 0

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. 

.

Link to post
  • 0
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! 

Link to post
  • 0
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 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...