A user is experiencing issues with image banner sizing across mobile and desktop devices. The second image is not adapting properly to the layout.
Current Problem:
Solutions Offered:
Quick Fix:
Mobile-Specific Adjustment:
Status: Multiple community members have reviewed the issue and provided CSS code snippets to resolve the mobile display problem. The discussion includes screenshots demonstrating the current issue and expected results.
The prolblem is this not second picture is adapt to image
I now have this script :
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}
Password:Kurac
Hi @Filip02 ,
I checked and didn’t find the section you described, can you send me a link that shows this?
I will check it.
Hi @Filip02
I have checked on your query and see that the Desktop is working as requested now.
Here is the code for adjustment on Mobile.
You can follow this instructions:
Go to Shopify > Theme > Customize
Copy and paste this code on Theme settings > Custom CSS section
@media screen and (max-width: 768px){
div.banner.banner--content-align-center {
height: 370px !important;
}
}
here is the result:
Desktop : https://prnt.sc/Ua4Lsb2Ttnt5
Mobile: https://prnt.sc/MJAOC77s93Ku
