Return to previous page

8Theme Banner With Mask – Mobile responsive not working

This topic has 9 replies, 2 voices, and was last updated 7 years, 2 months ago ago by Olga Barlow

etinteractive

Participant

February 2, 2017 at 04:49

I am trying to get 3 column layout wiht Banner with mask to be mobile responsive
But it does not work on Ipad, Ipad Pro.

I cannot figure out why, must be column responsive settings but I’m not sure what they should be?

#153712 Copied Theme version: 3.7 WooCommerce version: 4.7.2

8 Answers

Olga Barlow

Support staff

February 2, 2017 at 17:56

Hello,

Yes, you can use either column responsive settings http://prntscr.com/e3n1sm or use Custom Carousel element http://prntscr.com/e3n2kd and add banners into this carousel. Then you’ll be able to show 3 banners on desktop, 2 slides per row for ipad etc http://prntscr.com/e3n3vh

Regards

#153815 Copied

etinteractive

Participant

February 2, 2017 at 18:00

Olga,

The original carousel u have on your bike theme worked, but it became a “slider” on mobile and you could not see the other 2 slides easily.

Is there a way to have them Stack on tablet/phone layouts?

1 | 2 | 3 – Desktop

1
2
3
on Phone

Everything I try something gets cut off or broken.

#153818 Copied

etinteractive

Participant

February 2, 2017 at 18:10

http://prntscr.com/e3n9q0

I did 3 columns w/o carousel. This is Ipad layout

Iphone layout
http://prntscr.com/e3nac0
It responds and stacks but with a big white gap.

but at least the banners are readable.

#153821 Copied

Olga Barlow

Support staff

February 3, 2017 at 12:06

Hello,

Unfortunately, there is no way to have carousel for the ipad and simple banners for the mobile.
If you want to remove the space below the banners add the following code in custom CSS
.banner {margin-bottom: 0;} and after that add the margin for your row with banners in row settings.

Regards

#153878 Copied

etinteractive

Participant

February 3, 2017 at 14:40

I dont want both,

I just want 3 column row with Banner with Mask to be mobile responsive.

Doesnt work in your theme. on Ipad/Ipad pro.

#153909 Copied
Olga Barlow

Support staff

February 3, 2017 at 19:37
Hello,

Ok. Then let’s try some custom to make it nice (Theme Options > Styling > Custom CSS)
```
@media only screen and (max-width: 1200px){
.banner.responsive-fonts .banner-content .content-inner .btn {
    zoom: 0.8;
}
}
@media only screen and (max-width: 1170px){
.banner.responsive-fonts .banner-content .banner-title, .banner.responsive-fonts .banner-content .banner-subtitle {
    zoom: 0.5;
}
}

@media only screen and (max-width: 767px){
.banner.responsive-fonts .banner-content .banner-title, .banner.responsive-fonts .banner-content .banner-subtitle {
    zoom: 0.8;
}
}
```
And don’t forget to add margin for the row below http://prntscr.com/e4404m

Regards
#153975 Copied
etinteractive

Participant

February 3, 2017 at 19:43

You’re SUPPORT IS AMAZING!

Thank you!

#153976 Copied

Olga Barlow

Support staff

February 6, 2017 at 10:36

Hello,

You are welcome!
Would be appreciated if you leave 5stars rating for our theme https://themeforest.net/downloads

Regards

#154056 Copied
Viewing 9 results - 1 through 9 (of 9 total)