Jump to content

Images on Home page on Mobile are too big

Go to solution Solved by tuanphan,

Recommended Posts

MOBILE.thumb.jpeg.b9a96be4c60c68491959d974d7075be2.jpegCOMPUTER.thumb.jpg.82a6a0ff5fc37aba7e8e061b8c16ea18.jpgHi everyone ! 

I set up a home page with a ken burn effect (9 photos) 

It's fine on a computer, even if the images are a little cropped.

But I have a problem on Mobile phones: 

The home page cropped dramatically the images 😱

How can I either, make the images not cropped on mobile? , or make a different home page on mobiles, without changing the homepage on computers?

here are : one screenshot of my homepage on a mobile and another on the computer 

Thank you for helping me 🙏

Link to comment
6 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
}

 

Thank you so much for your answer !! 🙏 💖 it worked ! The background color now is white and it's not very nice Do you know how I can change the color of the background to full black ? I promess, it's my last question 😋

IMG_3912.jpeg

Link to comment
  • Solution

Use this new code

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
body.homepage {
    background-color: black;
}
div#block-yui_3_17_2_1_1538049733920_4401 {
    padding: 0px !important;
}
}

 

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
On 2/10/2023 at 9:19 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
}

 

 

1 hour ago, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
body.homepage {
    background-color: black;
}
div#block-yui_3_17_2_1_1538049733920_4401 {
    padding: 0px !important;
}
}

 

Thank you soooo much !!! you made my day 💖

 

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.