Jump to content

Resize media image and text on mobile only

Go to solution Solved by tuanphan,

Recommended Posts

Hello! I am needing help and I am trying and learn a few things. 

1) I would like to know how to find the right selector for the background image so I can alter it for mobile. (page specific, not global)

2) How to resize it so that it fits on mobile, and if possible, how to position it.

3) Set a min or max height.

4) Change the text size so that it fits on the screen better for mobile.

5) I have multiple pages that I need to change so maybe how to select multiple pages or something.

6) anything else that is helpful to make it look good that I don't know about

**This would be page specific and not global**

If someone could give me an example of the mobile code for High-End Ceramic Coating Service In Owasso, OK - Kaliber Auto Detailing to make that car image fit along with the text and the background does not take up the whole screen, with the car in the right position.. that would be awesome. 

Another example would be https://www.kaliberautodetailing.com/paint-polishing

I don't think I need the code so much for this one as much as I am interested to see how the selector differs from the first one.

I do have that find Squarespace Id's extension, but I don't think that is showing me everything. 

a huge thank you for any help with this! 

 

 

NOTE: I have attached an image of how it looks on my screen, which is a Samsung S23 Ultra. Squarespace preview shows it just a tad wider than this with the words "Ceramic Coating" on one line instead of two. We can see the car is cut off... there is a lot of black dead space from the image, and the text is way too big 

 

427003805_372724378866371_4702467574128512499_n.jpg

Edited by Rmarkjr
added picture
Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Website > Website Tools > Custom CSS (if you need to resize text, I will give another code)

@media screen and (max-width:640px) {
body#collection-648fd387518f87218ded629c section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

image.thumb.png.77a3e1a1cc0a0d7b04cbafe79820777d.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you! I see that you used the collection id from the site... having a hard time how you found the section.Intro figure img part.

 

But anyhow, yes, if there is a way to resize the font on mobile so that it actually fits better in there and also get rid of the long black dead space that is under the car with the text that would be great! The goal would be to have the car fit right with the text over the car and not almost each word on a sperate line. Hopefuly then part of the website text shown under that, starting with the What Does A Ceramic Coating Do?

 

Also, if someone wanted to zoom in on the car and make that fill the screen left to right just a bit more... how would you do that? 

 

Thank you again!

Link to comment

If you want to apply to other pages, no need to find collection id, just edit that page > Add a Code Block on bottom of site > paste this code

<style>
  @media screen and (max-width:640px) {
section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}
</style>

If apply to that page only, use this new code to Custom CSS

@media screen and (max-width:640px) {
body#collection-648fd387518f87218ded629c {
section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section.Intro.Intro--has-image h1 {
    font-size: 20px !important;
    position: relative;
    top: -50px;
}

section.Intro.Intro--has-image {
    min-height: unset !important;
    height: 200px !important;
}}}

image.png.f21dca3b8fa3998f6fd44052a417c41f.png

If apply to other pages, use this code to Code Block

<style>
  @media screen and (max-width:640px) {
section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section.Intro.Intro--has-image h1 {
    font-size: 20px !important;
    position: relative;
    top: -50px;
}

section.Intro.Intro--has-image {
    min-height: unset !important;
    height: 200px !important;
}}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Hey! I just applied this to all my pages that I needed with the code box you  said to do

<style>
  @media screen and (max-width:640px) {
section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section.Intro.Intro--has-image h1 {
    font-size: 25px !important;
    position: relative;
    top: -100px;
}

section.Intro.Intro--has-image {
    min-height: unset !important;
    height: 200px !important;
}}
</style>

 

 

I got to say thank you! It worked beautifully. All my pages and city pages look sooo much better. 

I did change the top value to -100 to center it more and the font size up a bit. Man, I can't believe it finally looks good. Thank you! This helps me out a ton.

Out of curiosity, using that same code above for each page. Is there a way to say "zoom in" on the background image? like the car, if I wanted to make that appear a bit bigger, to remove some of the black space on the left and right of the car, without changing the position of it, is there an added code that can do that?

Link to comment
19 hours ago, tuanphan said:

You can add transform: scale(1.5); to this code

section.Intro figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    transform: scale(1.5);
}

 

Thats awesome. Thank you again! That was exactly what I was looking for!

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.