Venture Theme - Multiple link Image size on mobile changes

Highlighted
New Member
3 0 0

so on my website https://partieszako.myshopify.com/

The multiple link Image appears perfectly on the desktop view. However when I switch to the mobile view - the image is not square anymore but instead a rectangle. How do I still keep the image a square in the mobile version?

0 Likes
Highlighted
Astronaut
1083 178 213


1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:


@media (max-width:767px){


.hero{
    margin-bottom: -10px !important;
}
.hero .slick-track {
height: unset !important;
}
}


@media (max-width:460px){


.hero{
    margin-bottom: -50px !important;
}
}

@media (max-width:380px){


.hero{
    margin-bottom: -80px !important;
}
}



Please let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
New Member
3 0 0

Hi,

 

Sorry the image is still rectangular. I tried it from multiple mobile phones.

 

Or alternatively can I edit the code so that I have 2 square images that appear on the mobile browser instead of 1? so rather than have 4 rows of 1 I have 2 rows of 2. 

0 Likes
Highlighted
Astronaut
1083 178 213

hm... ideally you would want to be able to have a section that accepts a specific image for mobile and a specific image for desktop.

This is actually something I code all the time for my clients.
Please click here to check an example on my test store.
If you open the image on a desktop device, it will show one specific image rectangular. If you open it on mobile, it will show a different one, and 100% square: https://pandatests.myshopify.com/


This is how it looks at the customize page for the sake of example:

backe.jpg


This way you could fully control the width/height for both devices.

In your case it's worth noticing that your image is not a perfect square:

dantepw_0-1597555970204.png


So the code automatically resizes it to preserve its aspect ratio. It's essential to have this automatic code, though.
Otherwise it looks squish and, trust me, to look professional (and subsequently get sales) you absolutely need crystal clear pictures in your store.

Kind regards,
Diego


◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Okay thank oy so that is the slider image - I was talking about the images below the slider.

Screenshot 2020-08-16 at 9.49.39 AM.pngScreenshot 2020-08-16 at 8.22.14 AM.png

0 Likes