Jump to content

Resizing image and text on footer on mobile to appear smaller

Recommended Posts

@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:

image.png.4fb49ffb9a96e70fcf5f46df15e292b5.png

Edited by zhanamitkova
Link to comment

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

Link to comment
  • 3 weeks later...
  • 1 month later...
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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 :)

 

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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;
}
}

desktop.JPG

mobile.JPG

Hi,

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

image.thumb.png.bd1672439e887cdadd78c3d8255ecf0e.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

 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.

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.