Jump to content

How can I reduce the size of an image on mobile/tablet only?

Go to solution Solved by Beyondspace,

Recommended Posts

1 hour ago, scholarsayze said:

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/collection

Hello, is it possible to reduce the size of my image (see attached) on mobile/tablet only, perhaps down to 80%, and keep cantered?

Page = https://bluebird-porcupine-yzdg.squarespace.com/collection

Pword = bluebird

Many thanks.

image-size.jpg

Try this

@media only screen and (max-width: 768px) {
    .header-title-logo img {
        max-width: 80%;
    }
}

image.png.2766f221e8dd25cbfb84797080374d1b.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thanks Bangank36!

I can see how this code will be useful so thank you!

But I actually wanted to resize the image 'SCHOLAR & SAZYE' logo that appears in the second banner section. This image looks rather over powering on mobile/tablet as it almost spans across the entire screen.

So to reiterate, I just want to resize the logo image on the second banner for mobile/tablet, not the actual brand logo that appears in my main header.

Many thanks.

Link to comment
  • Solution
7 minutes ago, scholarsayze said:

Thanks Bangank36!

I can see how this code will be useful so thank you!

But I actually wanted to resize the image 'SCHOLAR & SAZYE' logo that appears in the second banner section. This image looks rather over powering on mobile/tablet as it almost spans across the entire screen.

So to reiterate, I just want to resize the logo image on the second banner for mobile/tablet, not the actual brand logo that appears in my main header.

Many thanks.

Sorry, use this one

@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1611587394882_12001  .sqs-block-image-figure {
    max-width:70% !important;
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

That's PERFECT!!! Thanks so much! I have duplicated and reduced the image size of the green font design also so thanks again.

Please, no need to apologise as your initial code has also come in handy, I have implemented this also.

Many thanks Bangank36.

Do you know if there is a way to also format the paragraph text (see attached) so it looks a little more 'neater'?

Many thanks.

format.jpg

Link to comment
4 hours ago, scholarsayze said:

That's PERFECT!!! Thanks so much! I have duplicated and reduced the image size of the green font design also so thanks again.

Please, no need to apologise as your initial code has also come in handy, I have implemented this also.

Many thanks Bangank36.

Do you know if there is a way to also format the paragraph text (see attached) so it looks a little more 'neater'?

Many thanks.

format.jpg

You mean lighter?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, scholarsayze said:

Sorry I mean like, formatted nicely perhaps justified somehow?

Like so?

#block-26496aa931f544c2413d p {
  text-align: justify;
}

image.png.d3d1248b16dbeb46e2a3dbaa3d9e38aa.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.