Shopify themes, liquid, logos, and UX
Hello
I am using the Dawn theme, and looking for help on how to center the image banner with padding on desktop, but keep as full-screen on mobile but sticking to the aspect ratio.
This is what I currently have:
I tried targeting the id (found with inspector) with custom CSS, but no changes were made.
Thank you!
Solved! Go to the solution
This is an accepted solution.
Hi @brvndn ,
You can add code by following these steps
<style>
@media screen and (max-width: 600px){
div#Banner-template--16921209897129__image_banner
.banner__content {
min-height: 200px;
width: 100%;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Was I helpful?
Sandesh Paudyal |
| Shopify Partner
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
Hi @brvndn , can you share the store URL?
Was I helpful?
Sandesh Paudyal |
| Shopify Partner
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
Hey Sandesh, the url is dwellay.com
This is an accepted solution.
Hi @brvndn ,
You can add code by following these steps
<style>
@media screen and (max-width: 600px){
div#Banner-template--16921209897129__image_banner
.banner__content {
min-height: 200px;
width: 100%;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Was I helpful?
Sandesh Paudyal |
| Shopify Partner
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
Hey Sandesh,
This worked to get the image adjusted for mobile, but how would I get it to be centered with padding on the sides on desktop? Similar to this:
Hi @brvndn ,
I tried to look in the issue and found the URL you provided yesterday is not working. Let me know if you need any help setting things up or provide me the working URL in order to look into the issue.
Thanks.
Was I helpful?
Sandesh Paudyal |
| Shopify Partner
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
Hey Brew, the new url is peachybear.com
Thank you for your help.
Hello @brvndn ,
Go to online store > Themes > Edit code > Find base.css file
Add to give code at the bottom of the base.css file
@media screen and (max-width: 749px)
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 18rem;
width: 100%;
}
Save Changes!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024