Social Icons and Icons for Services are appearing huge on the mobile version

I uploaded the icons on the desktop and they look perfect, when I got to the mobile version they are way bigger and I don't know how to restrain them!

Hi. Can you share link to page in screenshot? We can give some code to resize icons on mobile

Hi Tuanphan, 
sorry for replying so late, but I was away for a couple of days. 

The site is not published yet, so I am not sure if that thing with the link will work? 

Thank you, 

Nikolay 

On 6/28/2021 at 6:53 PM, Byutyunev said:

Hi Tuanphan, 
sorry for replying so late, but I was away for a couple of days. 

The site is not published yet, so I am not sure if that thing with the link will work? 

Thank you, 

Nikolay 

You can setup password & share url.

Hey tuanphan, here is the link to the website it is already life, so you can take a look at it, https://www.aralia-logistics.de  the problem with the icons on the mobile version still occurs, I appreciate your help a lot! Nikolay 

On 6/23/2021 at 8:05 AM, Byutyunev said:

I uploaded the icons on the desktop and they look perfect, when I got to the mobile version they are way bigger and I don't know how to restrain them!

Ah, I see what's happening. On mobile Squarespace columns are full width. To fix this in this section only paste in Custom CSS

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block {
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
} 

Thank you Nick you are saving me right now, but since it is my first time I inject a custom code to squarespace, and to not mess anything, I simply go to the page where I want to insert the code and go to advance and paste the code right?  

43 minutes ago, NickScola said:

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block {
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
} 

Okay so I go to Design > Custom CSS > then I paste the code as it appears here and click save right? Then it should work I hope, the reason I am asking is because I don't want to mess the site :D 

36 minutes ago, Byutyunev said:

Okay so I go to Design > Custom CSS > then I paste the code as it appears here and click save right? Then it should work I hope, the reason I am asking is because I don't want to mess the site 😄

 

Yes, that's it. 

22 hours ago, NickScola said:

Yes, that's it. 

Perfect! It worked, but how can I make it work for another page? I injected the code and it applied the restrictions only to this page – about us, so if I want to make the same code for the page – services, where do I have to tell the code to act that way? 

Ones again, I appreciate your help, thank you 
Nikolay 

On 7/6/2021 at 4:39 PM, NickScola said:

Ah, I see what's happening. On mobile Squarespace columns are full width. To fix this in this section only paste in Custom CSS

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block {
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
} 

 

Hey Nick, sorry for bothering you again, the code you gave me worked perfectly, but only to one of the pages and I have one more page where the image icons appear huge on mobile, how can I tell the code to go for that page too? That would help me a lot, I don't know if you saw my previous comment... 

I appreciate your help, 
Thank you 

8 hours ago, Byutyunev said:

Hey Nick, sorry for bothering you again, the code you gave me worked perfectly, but only to one of the pages and I have one more page where the image icons appear huge on mobile, how can I tell the code to go for that page too? That would help me a lot, I don't know if you saw my previous comment... 

I appreciate your help, 
Thank you 

Add the page section id to the CSS. So now your CSS should look like:

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block,
#page-section-60b618ca71ea826d88fbefbc .image-block
{
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
}

12 hours ago, NickScola said:

Add the page section id to the CSS. So now your CSS should look like:

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block,
#page-section-60b618ca71ea826d88fbefbc .image-block
{
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
}

 

WOW Thank you Nick, it worked like magic, I really have to take a course for CSS and HTML for basic stuff, because I am constantly working with web projects, and since I am new to the Ui world I did not knew I'll need it, but now I see it will be beneficial... Thank you ones again, and if there is anything I can do for you to make this up, let me know... I appreciate your help ones again, huge thanks

Nikolay 

On 7/6/2021 at 9:07 PM, Byutyunev said:

Hey tuanphan, here is the link to the website it is already life, so you can take a look at it, https://www.aralia-logistics.de  the problem with the icons on the mobile version still occurs, I appreciate your help a lot! Nikolay 

Hi. Do you need help to fix these?

Site URL: https://www.aralia-logistics.de/

1. (Mobile – Chat) Chat box is cut off

2. (Mobile/Tablet – Chat) when i close it, i can’t open it again (Chat icon can’t click)

3. (Mobile – Footer) Make footer links to 2 column

4. (Tablet – homepage) Increase text width?

5. (Tablet – Homepage) Image disappear

6. (Mobile/Tablet –  ) Image disappear

https://www.aralia-logistics.de/leistungen

3 hours ago, tuanphan said:

Hi. Do you need help to fix these?

Site URL: https://www.aralia-logistics.de/

1. (Mobile – Chat) Chat box is cut off

2. (Mobile/Tablet – Chat) when i close it, i can’t open it again (Chat icon can’t click)

3. (Mobile – Footer) Make footer links to 2 column

4. (Tablet – homepage) Increase text width?

5. (Tablet – Homepage) Image disappear

6. (Mobile/Tablet –  ) Image disappear

https://www.aralia-logistics.de/leistungen

Wow I did not knew that we have so many problems on the site, sure I would love to use some extra help, since it is some extra work I wanted to ask you if it's going to cost me anything? 

Thank you in advance. 

Nikolay 

17 hours ago, Byutyunev said:

Wow I did not knew that we have so many problems on the site, sure I would love to use some extra help, since it is some extra work I wanted to ask you if it's going to cost me anything? 

Thank you in advance. 

Nikolay 

It is free or paid, as you choose. If you don't have a budget, I'll answer them all for free. However I can only help 2 problems/day. With 6 problems, I will send 6 answers in 3 days.

You can see pricing structure here.

Which problem do you want to solve with first?