Jump to content

Resize Icons in Mobile View

Recommended Posts

Site URL: https://moose-lion-yz4g.squarespace.com/config/

Page: /whatewedo

 

Hello!

I'm having issues with my icon sizes on mobile view. On desktop they look good but when I switch to mobile view they look massive. I've seen this issue on other forums and tried to use the lines of code for my website but with no luck. 

Can anyone help?

image.png.30b07d29175c4763daed239fdbc54d81.png

image.thumb.png.eadf19bfab02316a610c4cc8bd7927a3.png

Edited by ConsultingWebsite
Link to comment
  • Replies 10
  • Views 977
  • Created
  • Last Reply

Top Posters In This Topic

On 9/25/2021 at 9:10 PM, ConsultingWebsite said:

Thanks for your response!

https://www.exevion.com/whatwedo

It's an issue on the "What we do page". The section layout is different than on the home page. 

How can I hide the icons in mobile view (or make them smaller)

It looks like you figured it out on mobile.

However on tablet, the icons look small. Do you want to change it to 2 items/row or increase icon width?

image.thumb.png.5cb452c3efcf68bdc75b6b33b6ecea0f.png

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
  • 3 months later...

Hello tuanphan!

I am trying the same. I was using this code, that you posted in another chatt.

@media screen and (max-width:640px) {

  #yui_3_17_2_1_1641311472092_292 { 
    
width: 30% !important; 
    height: 100% !important; 
margin: 0;
} }

It works good at the first moment - after a while it change back to the old big size. What do you think is the Problem? 

Unfortunately we are not online but you can see it on this Screens

Bildschirmfoto 2022-01-05 um 17.32.19.png

Bildschirmfoto 2022-01-05 um 17.32.29.png

Bildschirmfoto 2022-01-05 um 17.49.08.png

Link to comment
On 1/5/2022 at 11:50 PM, sergio1967 said:

Hello tuanphan!

I am trying the same. I was using this code, that you posted in another chatt.

@media screen and (max-width:640px) {

  #yui_3_17_2_1_1641311472092_292 { 
    
width: 30% !important; 
    height: 100% !important; 
margin: 0;
} }

It works good at the first moment - after a while it change back to the old big size. What do you think is the Problem? 

Unfortunately we are not online but you can see it on this Screens

Bildschirmfoto 2022-01-05 um 17.32.19.png

Bildschirmfoto 2022-01-05 um 17.32.29.png

Bildschirmfoto 2022-01-05 um 17.49.08.png

You can setup site access 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
On 1/8/2022 at 6:10 PM, sergio1967 said:

Add to Design > Custom CSS

/* Mobile icons */
@media screen and (max-width:767px) {
div#page-section-6093c2a716f1837bb100d9fd figure {
    margin-left: 0 !important;
    width: 30%;
}
footer.sections .image-block {
    width: 30%;
}
}

 

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.