Image Size on Mobile

New Member
8 0 0

Hello! I am trying to fit the product's images but on mobile, they keep being cut.

 

Here's the piece of code to it:

<div class="flexslider flexslider-thumb flexslider-thumb--product">
  <ul class="slides">
    {% for image in product.images limit: 3 %}
 
    <li class="slide slide--{{ forloop.index }} js-img-holder-cover" data-thumb="{{ image.src | product_img_url: 'medium' }}">
    <img src="{{ image.src | product_img_url: 'master'}}" alt="{{ product.title }}">
    </li>
    <style>
          @media screen and (min-width: 769px)
            {.flexslider {
            width: 50%;
            height: 25%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            }}
          
            @media screen and (max-width: 769px)
            {.flexslider {
            
            max-width: 100%;
            max-height: 50%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-top: 75px;
            
            }}
    </style>
    {% endfor %}
  </ul>
</div>
 
How can I put the pictures on their size on mobile?
0 Likes

Hello 

Please share your site url so that i can check and let you know.
You have to add css for mobile view only.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes