Need help with overlapping imgs on phone and excess white on products

Solved
Highlighted
Excursionist
12 0 4

IMG_8586.PNGIMG_8587.JPG

 

Hey all, im just working on a little product and im having some trouble with these problems, any help would be super helpful, thanks heaps

Im using the narrative theme

0 Likes
Highlighted
Astronaut
1085 178 213

Hello,

Overlapping Images:
Please share your store URL, page URL and also password (if your store has one) so we can help you.

White spaces:
From what I can tell this is not a code issue, it's an image editing issue.
You need to export your images as .png with transparent background. Try searching on youtube for tutorials about that, it's not related to code.


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
1 Like
Highlighted
Excursionist
12 0 4

Sorry!!

vapouroma.com 

password is tiabru

0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

Hello,

No problem!

To remove white spacing & add more space between overlapping images do this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>
.custom__item-inner .card__info{
    display: none !important;
}

@media (max-width:600px){
.image-bar__content.image-bar__overlay{
    margin: 20px 0 !important;
}
}
</style>

 


Let me know whether that solves your issue.


◦ 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
Excursionist
12 0 4

It worked, thanks so much!!

Im not sure why but on some phones it overlaps like in the photo i posted, is their any way i can add more margin between them?

0 Likes
Highlighted
Astronaut
1085 178 213

@Trainingasap 

You're welcome!

Sure, in the code that I gave you just change the value 20px to something higher, like 40px. You can play around to find a value that fits your needs.

Please don't forget to press the button "Accept as Solution" on my answer to help other people with similar issues as yours in the future.

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
1 Like
Highlighted
Excursionist
12 0 4

IMG_8589.PNG

I appreciate it heaps! just doing some troubleshooting and wonder if theirs a way i can keep the img height 100%, that's the only reason i can think its still getting cut off

0 Likes