Shopify themes, liquid, logos, and UX
Please help me with the css, to fill the gaps right and left without changing the size of the image (gif)
Pass: biangu
Solved! Go to the solution
This is an accepted solution.
Hey @MT27,
You should try this. I think this is as far as I can customize it with CSS only
@media only screen and (max-width: 759px) {
section#shopify-section-template--18448488431883__image_banner_JL4YDe .banner__media.media {
background-color: black;
}
section#shopify-section-template--18448488431883__image_banner_JL4YDe .banner__media.media img {
max-width: 60%;
left: 50%;
transform: translateX(-50%);
}
}
Hey @MT27,
Are all the negative margin values added by you?
yes
I see, generally it's not a good idea to do that because it causes unexpected behaviours. Let me look into it and give you a solution.
Hey @MT27,
This should work out for you. Paste this into the Custom CSS and test it.
@media only screen and (max-width: 759px) {
#shopify-section-template--18448488431883__image_banner_JL4YDe .banner__media.media {
margin-bottom: 0px !important;
margin-top: 0px !important;
}
#shopify-section-template--18448488431883__0d36fe3e-71e5-4265-b621-f33e9f51b4b0 .banner {
margin-bottom: 0 !important;
}
#shopify-section-template--18448488431883__image_banner_JL4YDe div#Banner-template--18448488431883__image_banner_JL4YDe {
min-height: 18rem !important;
}
}
Hi, it took the image (the gif spinning) down rather than feeling the gaps left and right. I want the gif to stay at the height bc I want to cat that part of the main banner.
This is an accepted solution.
Hey @MT27,
You should try this. I think this is as far as I can customize it with CSS only
@media only screen and (max-width: 759px) {
section#shopify-section-template--18448488431883__image_banner_JL4YDe .banner__media.media {
background-color: black;
}
section#shopify-section-template--18448488431883__image_banner_JL4YDe .banner__media.media img {
max-width: 60%;
left: 50%;
transform: translateX(-50%);
}
}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025