Jump to content

Small icons look wrong on a mobile device

Go to solution Solved by tuanphan,

Recommended Posts

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 comment
  • Solution

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • violettag changed the title to Small icons look wrong on a mobile device
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 comment
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 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

image.thumb.png.f69a3b8a51b04920692dbfe9d81927e7.pngon mobile view

 image.png.e17e4b5ecdeb00c5b1081931b5b0d48e.png

 

Thank you so much for your help!

Edited by heiiidii
Link to comment
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 ... 

image.thumb.png.f69a3b8a51b04920692dbfe9d81927e7.pngon mobile view

 image.png.e17e4b5ecdeb00c5b1081931b5b0d48e.png

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.