make my banner visible on mobile

aquicshop
Visitor
3 0 0

Hello,

I tried the solutions available on the shopify community but nothing works for me or I didn't find the right topic.

I just want to make my banner visible on mobile because it looks good on pc but on mobile, the image is cut out, do you have a answer ?

(I use the venture theme)

Replies 8 (8)

Ninthony
Shopify Partner
2329 350 1023

Very common question with a not so easy answer. The thing about desktop vs mobile is that desktop viewport is wider than it is tall, and mobile viewport is taller than it is wide. Obviously the same picture is not going to work on both displays. The way most themes circumvent this is to use the background-image property in CSS and use the background-size property to cover, and the background-position property to center. This works but as you can see, your image is cut off because with a background-image, you have to define the height and width of your container for the image to show up at all. The way I typically handle this situation is to use a picture element and swap out 2 images, one for desktop and one for mobile and let the images define the size of the container rather than explicitly defining them yourself. This will require a lot of reworking your code, so if you aren't familiar with editing I'd suggest hiring a shopify expert to achieve the kind of effect you're looking for. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
aquicshop
Visitor
3 0 0

Yes, two images one for mobile and one for pc would be a good idea if there is not too much code to add.
Do you know how to do that ?

Developer-G
Shopify Partner
3033 593 846

Hello 

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

div#shopify-section-slideshow {
    display: none;
}

@media (max-width: 768px){  
div#shopify-section-slideshow {
    display: block;
}
}

If still not working as you want then share your store url.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
aquicshop
Visitor
3 0 0

I did exactly what you told me to do, but it's not working.

Here's the link to my website, https://aquic.shop/

Developer-G
Shopify Partner
3033 593 846

Sorry my instructions was wrong.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Nanakal
Excursionist
26 1 3

Hi, I have the same problem and the below worked for me, tried it out

Go to online store - customize- choose header/ image with text- go down to section hight and from the drop down menu select - adapt to image.

let me know if this was helpful.

atlanticworx
Visitor
1 0 0

This worked GREAT! Thank you. 

Pilipala
Visitor
1 0 0

Hello.   I am having this same issue.  I have followed your instruction and it worked but what was a white image is now greyed over. Like it does if you add text.   Can you help?