Docs

[444media]

I am trying to create a responsive squeeze page slide in Slider Revolution. I created a squeeze page at ladycannabis.com using Slider Rev. above mast head (for just the logo) and Cornerstone below the masthead for the text, image and email opt-in box. But it wasn’t looking good on mobile. So I decided to create another slider, and make it visible only on mobile (and turned mobile off on the desktop version described above. I also turned off mobile for the 3 sections in Cornerstone). I put the logo, the text, and the opt-in box all on the new slider. I just want all 3 elements (layers) to show on one screen, full screen when viewing on mobile. Issues:

1. It seems that the cornerstone area (not the elements) is still showing on mobile. Just a large blank white box below the slider when looking at the page on mobile. See screenshot.

2. Maybe when 1 is fixed this will fix itself, but the green area, the slider, is not being responsive. So the text and opt-in box is very small. But maybe if I can get the large white area below the green slider to disappear, the green area (slider) will show much better on mobile. But not sure why it’s trying to show both areas on mobile? See same screenshot.

3. I placed the short code from the email/mail chimp plugin as a text layer. For some reason the button is showing full size, but the opt-in box where person enters their email is showing very narrow. See screenshot.

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[444media]

The URL is in my post, 2nd sentence:

“I am trying to create a responsive squeeze page slide in Slider Revolution. I created a squeeze page at ladycannabis.com using Slider Rev. ”

ladycannabis.com

[Christopher]

Hi there,

#1 Due to lack of enough content you see body background color. please add more content to this page and check your page again.

#2 & #3 To make slider responsive, check following links :
https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/

Hope it helps.

[444media]

“#1 Due to lack of enough content you see body background color. please add more content to this page and check your page again.”

But I don’t want content there. For mobile view, I put all the content in the slider.

I’ll review the links you sent.

Thanks

[Paul R]

You’re welcome! 🙂

[444media]

Still having the issue with the opt-in box being too narrow on mobile. I used the Mail Chimp eMail forms plugin and created an opt-in form just for mobile (and another for desktop). I can see how to adjust the color and size of the button, but where one would enter their email address in the blank field, that is far too narrow and don’t see anywhere to size or adjust this. Please see screenshot from original post here. That narrow white bar above the red button “keep me up to date” is the email entry field.

[Lely]

Hi There,

Please try adding this custom CSS on Appearance > Customize > Custom > Edit Global CSS

@media (max-width: 480px){
.home input#x_subscribe_form_email {
    font-size: 16px !important;
    width: 100% !important;
}
}

Hope this helps.

[444media]

Thanks. But unfortunately didn’t work

[Paul R]

You can try this code instead.

@media (max-width: 480px){
.home #x-section-4 {
    padding:45px 0;
}
}

Hope that helps.

[444media]

Ok…that did change the size of the opt-in box, but now it’s out of proportion with the button. The button is small. And the opt-in box is not wide enough. So I changed the max-width: from 480px to 780px, but it didn’t seem to change the width at all. It’s also at the very edge of the bottom of the screen, and the short code is not placed that low in the slider.

See attached screenshot.

Thanks

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 480) {
    .x-subscribe-form input[type="submit"] {
        white-space: inherit;
    }
}

Hope this helps.

[444media]

Didn’t work. Now it’s back to the way it was in the first screenshot. See attached screenshot here…looks about the same.

[444media]

Is there maybe a better way of inserting an opt-in box onto a slider revolution slide? Maybe the way I am doing it now, using the text/html layer with a short code (from the mail chimp plugin) is the issue(?)

[Rad]

Hi there,

Please remove that CSS.

I see, there are two form, one from the slider and one from section’s content. For section’s content, please remove the 45px padding so it will align with the button.

For the slider, please add this CSS

@media (max-width: 767px) {
.home .x-slider-container .x-subscribe-form input[type="text"], .home .x-slider-container .x-subscribe-form input[type="email"] {
    line-height: 2.65em !important;
    padding: 0 0.65em !important;
    font-size: 2.65em !important;
}
.home .x-slider-container .x-subscribe-form input[type="submit"] {
    font-size: 16px !important;
}
.home li[data-index="rs-2"] .tp-parallax-wrap:nth-child(4) {
left: 10% !important;
width: 100% !important;
}
.home li[data-index="rs-2"] .tp-parallax-wrap:nth-child(4) > .tp-loop-wrap {
width: 100% !important;
}
.home li[data-index="rs-2"] .tp-parallax-wrap:nth-child(4) > .tp-loop-wrap > .tp-mask-wrap {
width: 80% !important;
}
}

Cheers!

[Author]

Posts