Different Image Max Height in Mobile and Desktop

Different Image Max Height in Mobile and Desktop

maniacmeet
Visitor
1 0 0

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.

Replies 4 (4)

dmwwebartisan
Shopify Partner
12321 2552 3729

@maniacmeet 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Zworthkey
Shopify Partner
5581 642 1579

@maniacmeet 

For that you have to customized your theme for both different View like mobile and Desktop.

 

Thank you

Zworthkey
Shopify Partner
5581 642 1579
<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 %}




iCart_App
Shopify Partner
626 60 113

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


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com