Changing banner size to make mobile friendly

Store Design
1

hello

my banner size for my website www.glinco.co.uk is perfect on desktop but on mobile the banner does not fit

could anyone help with some code to fix the issue?

regards

2

@Glinco

please Go to Online Store->Theme->Edit code then go to assets/styles.css->paste below code at the bottom of the file.

@media (max-width: 767px){
.section-id-banner-index .slide { height: 15vh; min-height: 150px !important;}
.slideshow .slide .slide-button {margin: 0 1em 1em; font-size: .554rem; padding: 13px 23px; min-height: 30px;line-height: 0.5em;
}
.slide-text.large-text { font-size: 1em; line-height: 0.5;}
.slide-heading { font-size: 1.5em;}

}

Thanks!

3

Hey thanks for that code

I have tried that but the slideshow banner is still the same is there any solution to this?

regards

1 Like
4

@Glinco

Remove Previous code & add this code

@media (max-width: 767px){
.section-id-banner-index .slide { height: 15vh !important; min-height: 150px !important;}
.slideshow .slide .slide-button {margin: 0 1em 1em; font-size: .554rem; padding: 13px 23px; min-height: 30px;line-height: 0.5em;
}
.slide-text.large-text { font-size: 1em; line-height: 0.5;}
.slide-heading { font-size: 1.5em;}

}
5

@Glinco , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottom of the file:
@media (max-width: 749px){
    

.rimage-wrapper {
    min-height: unset !important
}

.rimage__image{
    object-fit: contain !important;
}
}

Unfortunately this is the best that can be done in this case.

Kind regards,
Diego

6

Hi, i have tried your code in “theme.scss.liquid” file, but no changes in the banner.

I have not found style.css file in the assets. Can you please help me?

1 Like
7

Hi Yurik,

I am having the same issue have you figured this out?

Thank you in advance!