Jump to content

Header image not resizing for mobile + tablet

Recommended Posts

Site URL: https://www.periodictableofveg.com/

Hi there, I'm having an ongoing issue with the size of my homepage image. I have tried different bits of custom CSS and each seems to generate problems.

My homepage banner image cuts off on some mobile devices and on all tablet devices. I've tried two things:

OPTION 1 (this still has issues on some mobile and tablet devices)

@media screen and (max-width:1200px) {

[data-section-id="5feb9cc97360c774c5ed4562"] {

    min-height: 40vh !important;

}

}

Can you help? Thanks!

OPTION 2 (makes the design responsive, but creates a massive white gap on mobile)

 

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

[data-section-id="5feb9cc97360c774c5ed4562"] .section-background img {

    width: 100% !important;

    height: auto !important;

}

}

 

Link to comment
  • Replies 1
  • Views 436
  • Created
  • Last Reply

Remove your code & add new code

/* Tablet */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.