Adding Spacer back to Mobile or Resizing image

Site URL: https://www.andrearteaga.com

Hi I have tried searching for this yet can not seem to find anything on it,

My question is on the arrow gif that is on my homepage (work), it is perfect size on desktop because I added spacers, but once I go to mobile the arrow is way too big. 

1) I tried resizing the image with "max-width" but it just squished the arrow instead of resizing. I may be missing something there

2) I tried to modify one of the spacers since mobile gets rid of them with this code: #block-yui_3_17_2_1_1621041734241_7526 {
    display: block !important;
  } - that made the spacer appear but it was not to the left of the arrow.

Thank you very much in advance 

2 hours ago, drealynne said:

Site URL: https://www.andrearteaga.com

Hi I have tried searching for this yet can not seem to find anything on it,

My question is on the arrow gif that is on my homepage (work), it is perfect size on desktop because I added spacers, but once I go to mobile the arrow is way too big. 

1) I tried resizing the image with "max-width" but it just squished the arrow instead of resizing. I may be missing something there

2) I tried to modify one of the spacers since mobile gets rid of them with this code: #block-yui_3_17_2_1_1621041734241_7526 {
    display: block !important;
  } - that made the spacer appear but it was not to the left of the arrow.

Thank you very much in advance 

try

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1621041734241_5266 figure {
      max-width: 150px;
    }
}

11 hours ago, bangank36 said:

try

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1621041734241_5266 figure {
      max-width: 150px;
    }
}

Okay I just tried this, thank you it worked! I just had to get rid of "figure", I also added !important but I think it could actually go without. I also added padding to center it. 

 @media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1621041734241_5266 {
      max-width: 150px !important;
      padding-left: 105px !important;
    }
}

Is there a reason the actual website (On my mobile phone) is not showing the exact same as the preview in the Squarespace editor? I had to adjust padding for my mobile phone. Below is first my phone, then what it Squarespace shows

On 5/16/2021 at 11:30 PM, drealynne said:

Is there a reason the actual website (On my mobile phone) is not showing the exact same as the preview in the Squarespace editor? I had to adjust padding for my mobile phone. Below is first my phone, then what it Squarespace shows

Have you solved it yet?

On 5/17/2021 at 8:27 PM, tuanphan said:

Have you solved it yet?

No not yet