Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Header image not resizing for mobile + tablet


Livia_Sole

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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;
}
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...