Image Size on Mobile

Highlighted
Shopify Partner
9 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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted