Hi, im trying to expand the banner mobile size. When i click on mobile version, my banner dont resize.
I want to expand the height only. Can someone provide me the code?
I’d like to change the bottom banner too
url: lojate.com
pw: pedro123
Topic summary
A user is experiencing an issue where their mobile banner doesn’t resize properly on their Shopify store. The banner appears too small on mobile devices and they want to increase its height.
Solution Provided:
- Navigate to Online Store → Theme → Edit Code
- Open Assets/theme.css file
- Add CSS code at the bottom targeting mobile screens (max-width: 640px)
- The code adjusts the aspect ratio padding to 50% and sets object-fit to cover
Important Notes:
- The responsive behavior depends on the original image’s aspect ratio
- Users should ensure uploaded images have good resolution
- Alternative method: Use Shopify’s Theme Editor Customize option to manually edit mobile site settings
Screenshots were shared showing the current issue and expected mobile view after applying the fix.
Hi @lojate ,
Layoutbase here, we can recommend a code. Here are the steps:
1.Go to Online Store → Theme → Edit code
2.Find the file Assets/theme.css add code below to bottom of file
@media screen and (max-width: 640px){
.slideshow .slideshow__slide .aspect-ratio {
Padding-bottom: 50%!important;
}
.slideshow .slideshow__slide .aspect-ratio img{
object-fit: cover;
}
}
The mobile view should look something like the example below once the code is applied:
Note: The code responds according to the ratio of the original image. So make sure the file you upload has good resolution. Another method you may try is to go into the Shopify Theme Editor>Customize, and manually edit your mobile site:
1 Like