Shopify themes, liquid, logos, and UX
I just started my new Shopify store. Currently, I am using Turbo Portland Theme on that site.
But now I started customizing it. But as theme offers only 1 option for the main Product Image Hight on the Product Page for Desktop and Mobile.
What should I do now? How can I set different image hight on mobile and desktop?
eg. for mobile MAX-HEIGHT is 300px and for desktop 450px.
Please share your store URL!
Thanks!
For that you have to customized your theme for both different View like mobile and Desktop.
Thank you
<div id="hidden_mobile" style="width:100%; margin-top:100px;"><br><center>{{ section.settings.image_1 | img_url: '2048x' | img_tag }}</center></div>
<br>
<div id="hidden_desktop"><br><center>{{ section.settings.image_2 | img_url: '1028x' | img_tag }}</center></div>
<center> <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a> </center>
<style>
#hidden_desktop{
display:block;
}
#hidden_mobile {
display: none;
}
@media (min-width:992px){
#hidden_desktop{
display:none;
}
#hidden_mobile {
display: block;
}
}
</style>
{% schema %}
{
"name": "Image with Banner",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
{% endschema %}
Hello @maniacmeet,
Hope you are doing well.
You need to use the media query to have different image heights for Mobile and Desktop. Check this link:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this will help you out.
iCart Cart Drawer Cart Upsell App
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