Edit Slideshow on Dawn Theme Mobile Image Size

[dharris02903]

Hello I’m looking to fix two things relating to the mobile look of my website, Poochloot.com .

The slideshow looks great on desktop, but I can’t edit the dimensions of the slideshow for mobile so everything is cut off. I also need to change the button size on mobile, I still want it ot be on the image but smaller. Basically, the way it looks like on Desktop I want it to be the same on mobile. Below are screenshots of the problem.

I’ve already tried editing the base.css code with:

@media screen and (max-width: 749px) { .banner .banner__content:before { padding-bottom: 100%!important; }

and I’ve tried this code as well for the button size

@media screen and (max-width: 767px){
.button.button–secondary{
top: 80px !important;
}
}

Neither have worked. Any viable solutions would be greatly appreciated.

[BSS-Commerce]

Hi @dharris02903

Because the image on your mobile is quite large in height compared to width. So when the screen shrinks, the browser will automatically trim the image content to fit the size of the slideshow. To fix this, you can increase the height of the slideshow on mobile screens to match the size of the image.

=> Please copy and paste this code at the end of the base.css file.

@media screen and (max-width: 749px)
{
   .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
      min-height: 61rem !important;
   }
}

• Here is the result:

We hope that this can help you.