Solved

How to optimize banner size for desktop and mobile?

gwevs
New Member
5 0 0

Hope someone can help. 

We're having issues when it comes to optimizing our front page banners to work on both mobile & desktop. We are using the Envy by Eight theme.

There is an option to upload a desktop banner and mobile banner, which we have done, however, the text that sits on top does not work for mobile at all. It needs to be smaller, but the theme only allows for editing text globally for both desktop & mobile, so we can't figure out how to adjust one and not the other. We are happy with the desktop layout, we just need the mobile layout's text to be smaller.

DESKTOP:

Screenshot 2021-08-31 at 12.14.08.png

MOBILE:

Screenshot 2021-08-31 at 12.14.45.png

 

I'd appreciate your help. 

Thanks! 

 

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@gwevs 
Paste this code at the top of the theme-index.min.css file.

@media only screen and (max-width: 768px) {
h2.slideshow-fade-content a {
    font-size: 20px !important;
}
}

Thank You.

View solution in original post

Replies 9 (9)

Zworthkey
Shopify Partner
5581 642 1565

hii, @gwevs 
Kindly share your store URL so,
I can solve your issue.
Thank you.

gwevs
New Member
5 0 0
Zworthkey
Shopify Partner
5581 642 1565

@gwevs 
Sorry, I can't see your banner.
Thank You.

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@gwevs 
Paste this code at the top of the theme-index.min.css file.

@media only screen and (max-width: 768px) {
h2.slideshow-fade-content a {
    font-size: 20px !important;
}
}

Thank You.

gwevs
New Member
5 0 0

Thanks so much!

Zworthkey
Shopify Partner
5581 642 1565

@gwevs 
Welcome.

gwevs
New Member
5 0 0

The first slide works (the title could be bigger), however, the 2nd and 3rd slides are still not working? Is this something I need to do myself by targeting the mobile query with custom CSS?

 

Screenshot 2021-08-31 at 16.04.44.pngScreenshot 2021-08-31 at 16.04.50.pngScreenshot 2021-08-31 at 16.04.53.png

Anisha1
Visitor
1 0 0

Hi,

I am also facing an issue with my website

www.atmanindia.com

The banners as of now are basic to work with mobile, but I wish to use pre-designed banners, which are good for desktop but get cropped for mobile.