Dawn theme - how to adjust mobile banner image sizing
I'm trying to reduce the size of my banner image on the mobile device. It looks perfect on the desktop, but it's SUPER zoomed in on my mobile and looks bad. I have searched and tried a few different codes that have been suggested in other discussions, but they don't seem to work. Any tips?
Hey @michellelholm,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 989px) {
.banner__media.animate--zoom-in>img:not(.zoom):not(.deferred-media__poster-button) {
position: absolute !important;
height: -webkit-fill-available !important;
height: -moz-available !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @michellelholm,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 989px) {
.banner__media.animate--zoom-in>img:not(.zoom):not(.deferred-media__poster-button) {
position: absolute !important;
height: -webkit-fill-available !important;
height: -moz-available !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024