Resizing image and text on footer on mobile to appear smaller

Site URL: http://zhanamitkova.com/

Hey,

I need help putting code to resize the text and image on mobile to appear smaller. 

The site is http://zhanamitkova.com/ it looks fine on desktop but in mobile view the text and the image appear huge. How can I make those smaller to fit well on mobile view?

Thank you in advance!

Zhana

Which text/image? can you take screenshot?

Not sure if this will work, but some code I had from one of my sites. 

Assuming they are image blocks you wan't to reduce - Note, you may need to alter other things this just makes them smaller on the page.

/* Resize footer images */
  footer .sqs-image .sqs-image-content img, footer .image-block {

    transform: scale(0.5)

@Thurstings 

This actually works but it changes the size both on mobile and desktop, and I only want to change it for mobile. How can I do that?

Is it also possible to make the text "@ZHANA MITKOVA 2020" smaller on mobile ? And is there a way to make both (the AOI member image and @ZHANA MITKOVA 2020) appear closer to each other, so that it looks more compact on mobile?

Thanks again!

Cheers,

Zhana

PS : I like the way it displays on desktop https://zhanamitkova.com/ but here's a screenshot from the mobile version:

@zhanamitkova Here is the code to target mobile devices only - Note the 640px is the breakpoint for when it determines the screen is in mobile. Check your mobile breakpoint in your style editor and use the px value here.

/* Resize footer images */
 @media screen and (max-width: 640px) {

footer .sqs-image .sqs-image-content img, footer .image-block {

    transform: scale(0.5)

}}

/* Resize text on mobile */

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

font-size: 12px

}}

Note the font size I have entered is just an example so play around with it - I think the #block I am targetting is your text box. Let me know if this works?

Green = You can alter these figures to work for your website.

SS 7.1 uses max-width:767px

@Thurstings 

Hi, and thanks again!

For the image it worked but nothing happens with the other code for the text. Here's the result so far:

@zhanamitkova Hey, if you message me your login details I can login and look at the ID for that text. I won't be around this weekend, but can look at it early next week if that helps?

Let me know if you still need help?

@Thurstings hey! thanks again for the help and sorry for not replying earlier. I just dm-ed you if you could still help. Thanks!

On 3/2/2020 at 5:08 AM, tuanphan said:

Which text/image? can you take screenshot?

I am trying to make logo smaller around the same side as instagram logo on both desktop and mobile. 

On 5/23/2020 at 5:59 AM, meltyogastudio said:

I am trying to make logo smaller around the same side as instagram logo on both desktop and mobile. 

 

Can you share link to your site + access passowrd?

Hi Guys! 

@tuanphan @Thurstings Your custom codes has been very helpful thank you.

However, I do not understand how to make this logo size change only on mobile and not on desktop. My footer logo looks good on mobile now but it is way too smaller on the desktop view. 

my website: www.consyl.fr    password: fabron

Thanks for your help !!

Florent :)

16 hours ago, Floooca said:

Hi Guys! 

@tuanphan @Thurstings Your custom codes has been very helpful thank you.

However, I do not understand how to make this logo size change only on mobile and not on desktop. My footer logo looks good on mobile now but it is way too smaller on the desktop view. 

my website: www.consyl.fr    password: fabron

Thanks for your help !!

Florent :)

 

Add to Design > Custom CSS

/* resize mobile footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1618422578804_23142 {
    width: 30%;
}
}

On 11/3/2021 at 12:48 AM, lpotter said:

Hi, I'm having a similar problem and the code I used from above is resizing the image for mobile but the block itself is still big, so pushes the block to the right of it (logo image is centered) far down with a big ugly gap. Suggestions welcome!

etanaminingmentors.com

Monetaopoly01

/* reduce the footer image size */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1635873219529_13624 img {
    width: 30% !important;
    height: auto !important;
    transform: translateX(20%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1635873219529_13624 .image-block-wrapper {
    padding-bottom: 80% !important;
}
}

Hi,

It looks fine to me. Did you figure it out?

Hi @tuanphan! I'm having this exact same issue. I've tried troubleshooting, but just can't figure it out. The site in question is https://marlin-ladybug-r6hp.squarespace.com/. Password "suzy". The image I'm having issues with is the Let's Connect image in the footer. 

I would really appreciate your help and insight. 

Thanks!

On 11/14/2021 at 5:14 AM, imaginarybeast said:

Hi @tuanphan! I'm having this exact same issue. I've tried troubleshooting, but just can't figure it out. The site in question is https://marlin-ladybug-r6hp.squarespace.com/. Password "suzy". The image I'm having issues with is the Let's Connect image in the footer. 

I would really appreciate your help and insight. 

 

Thanks!

Add to Design > Custom CSS

/* Let connnect image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1633381600861_10950 {
    width: 50%;
}
}

Thank you so much! That worked perfectly. 

 i am need help for the same thing, I have tried the code in this forum but nothing is working so far. I have the image and it looks great on desktop, but when I switch to the mobile version it is cut off and doesn't show the whole image.

On 3/7/2022 at 10:32 PM, Krod said:

 i am need help for the same thing, I have tried the code in this forum but nothing is working so far. I have the image and it looks great on desktop, but when I switch to the mobile version it is cut off and doesn't show the whole image.

Hi. What is your site url?