[Jack DParticipant]

website http://www.protectiondogsuk.co.uk Renew WP 4.1.1

I have no problem with responsive text using Cornerstone but struggle on Slider Revolution. I have a single slide slider and I want the text to be responsive so that it sizes correctly on mobile. The slider is CONTACT on my contact page which I have as italicised but can’t make it responsive. Could you advise how the text layer should be amended to be responsive on this slider.

[DarshanaModerator]

Hi there,

Thanks for writing in! Upon testing, I cannot identify the issue that you have mentioned on the text. Could you please provide us with a screenshot? So that we can assist you.

Thanks!

[Jack DParticipant]

I have not altered the text as yet because I cannot work out the correct edit on the slider. The slider has the words CONTACT US which currently not responsive. Currently the text in layer is simply CONTACT US and I need to make this responsive but I am not sure how to edit the text to add the shortcode. So there is nothing to show you on a screenshot.

[Paul RModerator]

Hi Jack,

You can modify font size and layer position per device in revslider.

4. Screen/Device

To use this option, you first have to enable a Custom Grid Size for additional screens/devices.

Toggling between the different options here will allow you to style and position your Layer content based on the selected screen/device.

For example, if you had a text-based layer, you could assign it a font-size of 64px, with a top-right position for desktop view. Then if you switch to the smartphone view, you could change the layer’s font-size to 32px, and give it a bottom-left position.

For more information please refer to the link below

http://www.themepunch.com/revslider-doc/slide-layers/#layercanvas

Hope that helps.

[Jack DParticipant]

Many Thanks

[JadeModerator]

You’re welcome Jack.

[Jack DParticipant]

http://www.protectiondogsuk.
co.uk Renew WP 4.1.1

The main menu on devices in Landcape mode is not scrolling as per the screenshot. It scrolls OK in Portrait Mode

[JadeModerator]

Hi Jack,

Please add this code in the CSS customizer:

@media screen and (max-width: 979px){
    .x-navbar-fixed-top {
        position: relative !important;
    }
}

Hope this helps.

[Jack DParticipant]

Sorry this seems to have caused quite a few problems on menu on devices. The sticky menu has stopped working on portrait and landscape. I have left the code in the customizer so you can see. When I deleted it the sticky menu worked again

[Rue NelModerator]

Hello There,

Please update the code and use this instead:

@media screen and (max-width: 979px) and (orientation:landscape) {
  .x-navbar.x-navbar-fixed-top {
    position: relative !important;
    overflow: scroll;
  }
}

Please let us know if this works out for you.

[Jack DParticipant]

Thank you it works partly except that the menu bar is not sticky in landscape mode. Thanks for all your efforts I hope this can be rectified if not it’s not the end of the world!

[RadModerator]

Hi Jack,

What’s your target device? Is it iPad or just smaller mobile devices? CSS would be different for iPad.

Thanks!

[Jack DParticipant]

Just smaller devices such as iphone and galaxy. I realise that ipad is different as I use an emulator.However the menu is sticky on ipad in portrait mode although not in landscape. If the menu was sticky on all other devices in landscape mode that would be fine.

Regards

[RadModerator]

Hi there,

Hmm, maybe I have some confusion with the term sticky. Should the sticky stay on same top position and doesn’t move whole scrolling? Or is it sticky that it stay on viewport while scrolling? It’s like the confusion between left and right side while not sure where should be facing 🙂

Should it be fixed top on a landscape, or should be fixed top on the portrait?

If it’s the reversed of what you’re expecting, then how about reversing the CSS too?

@media screen and (orientation:landscape) {
.x-navbar.x-navbar-fixed-top {
position: relative !important;
}
}
@media screen and (orientation:portrait) {
.x-navbar.x-navbar-fixed-top {
position: fixed !important;
top: 0;
width: 100%;
}
}

Thanks!

[Jack DParticipant]

Back to square one I’m afraid when I altered to change to your suggestion the menu was sticky in landscape but the #770435 screen capture was the same with the main menu. This is the current code as I have had to revert to the previous code:

@media (max-width: 979px){
.x-btn-navbar .x-icon-bars:before {
content: “MENU”;
}
.x-section .x-text h3 {
margin-top: 0.2em;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
min-height: 70px;
}
.x-navbar.x-navbar-fixed-top {
position: fixed;
}

.x-navbar .mobile .x-nav {
height: 540px;
overflow-y: scroll;
}
}
@media screen and (max-width: 979px) and (orientation:landscape) {
.x-navbar.x-navbar-fixed-top {
position: relative !important;
overflow: scroll;
}
}

The above code is sticky in portrait but not in landscape but there is NO problem as per #770435 screen capture. So the code you suggest just takes me back full circle. Sorry

Have I missed something with your suggested code?

Regards

[Author]

Posts