Slideshow banner image too small on mobile

Store Design
1

Hello,

I am trying to have my slideshow banner image apear larger on mobile, but stay the same size on desktop. i am trouble searching for code to help fix this.

On Desktop below it is good and takes up most of the page

ZackL_0-1658453483587.png
ZackL_0-1658453483587.png2875×1607 620 KB

But then on mobile it is very small

ZackL_1-1658453590505.png
ZackL_1-1658453590505.png1242×2688 347 KB

thanks in advance for the help

2

Hi,

Can you try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset->/base.css ->paste the below code at the bottom of the file.
@media(max-width:786px){
.slideshow__media> img,.slideshow__slide{
height: 550px !important;
}
}
3

Hey Ahsan! This work great! The heading and the button are now in the center of the image, would you be able to help me shift them to the bottom center of the image?

4

That’s great.

please add this code after the previously added code

@media(max-width:786px){
.banner__content{
align-items: flex-end !important; 
}
}
5

Yes this worked for mobile! Could you help out as well with moving it on desktop?

6

If your want to further move content down then also include this code.

@media(max-width:786px){
.banner__box {
    padding: 1rem 3.5rem !important;
}
}
7

Hey Ahsan, that appeared to move the mobile content down farther, but did not effect the desktop position…

8

Add this at bottom

@media(min-width:787px){
.slideshow__slide {
    align-items: flex-end !important;
    justify-content: flex-end !important;
}
}
9

Fantastic! thank you so much it worked! I did have another question if you are able to help?

I was also trying to shift these two collection titles to the center of the page like below

ZackL_0-1658506100503.png
ZackL_0-1658506100503.png1223×1516 285 KB

10

add the following code

.title-wrapper-with-link {
    justify-content: center !important;
}

Please feel free to ask for any problems. My please to help you

11

Yessir it worked! Thank you so much for all your help. I had one final question if possible…

Would you be able to increase the size of the stars just on mobile? And then change the color of the stars to gold on both mobile and desktop?

ZackL_1-1658507709263.png
ZackL_1-1658507709263.png2205×1179 253 KB

12

please add the following code

.rating-star:before{
-webkit-text-fill-color:gold !important;
}
@media(max-width:786px){
.rating-star:before{
font-size: 24px !important;
}
}
13

The code was able to increase the size on mobile, but not desktop, would you be able to help get them larger on desktop too?

The color did change on both though!

14

you asked for the size change on just mobile.

here is the new code for the desktop.

@media(min-width:787px){
.rating-star:before{
font-size: 25px !important;
}
}
15

Yes worked again! Thank you! Sorry last thing, is there a way to get the parenthesis and number next to the star to be the same size and in line with the stars as well? For both mobile and Desktop

16

here is the code. You can change the font size value as per your choice, just change the numeric value.

.rating-count {
    font-size: 22px !important;
}
17

Thank you so so much! That is everything I could have asked for and more! Appreciate you!!!

18

yeah, I see you change it to 15 that is nice.

You can ask anything at any time here or on my email.