Hi all,
I have a banner on my website that perfectly fits on desktop view, but when I view it on the mobile app it doesn’t look good. How do I adjust it to fit mobile app and other devices properly?
The same happens with the logo. It’s ok on the desktop but it’s much smaller on the mobile app and other devices. Can you help me also adjusting that?
Desktop:
Mobile App:
Thanks in advance,
Hi, @tigas31 .
Please share your store URL and password.
Hi @websensepro ,
I’ve sent it privately.
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
@media screen and (max-width: 749) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 21rem;
}
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
@websensepro I’ve added the code at the bottom of the base.css file but nothing happened. Can you re-check?
Also could you check the question about the logo? The same happens with the logo. It’s ok on the desktop but it’s much smaller on the mobile app and other devices. Can you help me also adjusting that?
Thank you,
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 21rem !important;
add this code and dont remove the media@querry
@websensepro but this is what I already have. It doesn’t work.
I’m using this:
@media screen and (max-width: 749) {
.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 21rem;
}
}
Probably there’s some code on my base.css interfering with it.
Add !important after 21rem.
@websensepro I already did that, but nothing happens.
I probably have some code on my base.css file that it’s interfering with this.
check your dm.
@websensepro I’ve replied to your DM.
