A user is experiencing banner resizing and cropping issues with the Yuva Shopify theme across different screen sizes. The banner image gets cut off when viewport dimensions change, affecting both desktop and mobile views.
Attempted Solutions:
Proposed Fix:
A community member provided CSS code targeting .yv-image-banner-wrapper with:
height: fit-contentheight: 56vhInstructions were to add this to the base.css file.
Current Status:
The solution hit a roadblock—the user cannot locate a base.css file in their theme’s code editor (screenshot provided). The discussion remains unresolved and awaits further guidance on the correct file location or an alternative implementation method for the Yuva theme.
Hello,
I’m having issues with my banner on the Yuva theme resizing and cropping off my banner when the screen is different sizes, this is a test banner so can be resized to anything that fits. Does anyone have a code that will fix the banner image in place and fit the space? I’ve tried a few of the codes found on here already and none of them work correctly. Would also appreciate if the mobile banner could be fixed in place too!
Thank you in advance! 
Hello @Amystarr ,
Can you please share your store URL?
Hello, it’s https://www.rebelromance.co.uk/
Hello @Amystarr ,
Try this code:
Go to online store > Edit code> Find base.css file and add this code at the end :
/* Default for desktop and larger screens */
.yv-image-banner-wrapper {
height: fit-content;
}
/* For mobile devices */
@media screen and (max-width: 767px) {
.yv-image-banner-wrapper {
height: 56vh;
}
}
