Homepage slideshow not optimizing for mobile Avenue Theme

Solved
Ardens
New Member
6 0 0

Hi there,

 

I'm hoping to get some help with the Avenue theme.

It appears that the slideshow we have on our homepage is not optimizing for mobile. The images are not scaling and I can't seem to find a resolution.

our website is www.ardensgarden.com

Any help is greatly appreciated!

Thank you!

 

IMG_6007.PNG

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
9202 1563 1928

This is an accepted solution.

Hello @Ardens,

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

@media screen and (max-width: 1400px) {
.swiper-container .background-cover {
	-webkit-background-size: 100% 100% !important;
	-moz-background-size: 100% 100% !important;
	-o-background-size: 100% 100% !important;
	background-size: 100% 100% !important;
}
}
@media screen and (max-width: 900px) {
.swiper-container .background-cover {
height: 300px !important;
}
}
@media screen and (max-width: 750px) {
.swiper-container .background-cover {
height: 250px !important;
}
}
@media screen and (max-width: 480px) {
.swiper-container .background-cover {
height: 200px !important;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 9 (9)
Vellir
Shopify Partner
134 29 34

Hi Ardens.

 

From what I can see this is a paid theme, correctly? Have you tried reaching out to the developers for help?

 

They should be able to help you as they know their code better than anyone else.

 

Let us know how that goes.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
- Manage your new arrivals with Newr
oscprofessional
Shopify Partner
9202 1563 1928

This is an accepted solution.

Hello @Ardens,

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

@media screen and (max-width: 1400px) {
.swiper-container .background-cover {
	-webkit-background-size: 100% 100% !important;
	-moz-background-size: 100% 100% !important;
	-o-background-size: 100% 100% !important;
	background-size: 100% 100% !important;
}
}
@media screen and (max-width: 900px) {
.swiper-container .background-cover {
height: 300px !important;
}
}
@media screen and (max-width: 750px) {
.swiper-container .background-cover {
height: 250px !important;
}
}
@media screen and (max-width: 480px) {
.swiper-container .background-cover {
height: 200px !important;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Ardens
New Member
6 0 0

Thank you! This worked great! 

 

Ardens
New Member
6 0 0

Hi there, one more question. Why now when I try to delete that part of the code from the assets it distorts and "breaks" the whole template? Is there a way to safely remove that code?

oscprofessional
Shopify Partner
9202 1563 1928

@Ardens,

You want to delete my code

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Justin_Fok
Tourist
11 1 1

Does this method work with all themes? 

alexwin1982
New Member
2 0 1

Could you help me.

Where I can place this code to get this functionality ?

I did placed into end of theme.css.liquid but this dot not work for me.

I will appreciate your comments.

Junaidiqball
Tourist
3 0 2

Hi,

I am facing the similar issue, The solution mention is 3 years old I beleive the structure or navigation has chnaged.

I am not able to find theme.scss under asset. 

Kindly advise

oscprofessional
Shopify Partner
9202 1563 1928

Hi @Junaidiqball ,

path for theme.scss

Online Store->Theme->Edit code->Assets->theme.scss.liquid

If you have more queries please see the details below!

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87