I can't seem to reproduce this Mobile responsiveness effect.

kevin's Avatar

kevin

28 Feb, 2018 07:20 PM

Hello:

I just purchased Royal Slider today in the hopes of duplicating the responsiveness of the slider on laurenmessiah.com. Her HTML block text automatically moves below the slide image on tablet and smaller. Her source code lists Royal Slider, version 3.2.2, but the HTML around the slider looks far different that mine. Is there an easy way to reproduce this effect?

Thank you. Kevin

  1. Support Staff 1 Posted by Dmitry Semenov on 28 Feb, 2018 10:36 PM

    Dmitry Semenov's Avatar

    Hello,

    The slider on the page that you linked is custom-styled from theme stylesheet.

    You may create such with effect with RoyalSlider, but it'll require HTML/CSS knowledge.

    • Place content that you want to see over an image in "HTML content" tab instead of block editor. Or use "Slide Markuo Editor" in general options if you want the same structure for every slide.
    • Use CSS to place content on top-right side. (e.g. .your-element-class { position: absolute; right: 0; top: 0; }
    • Use CSS media queries to change the position of the element on smaller screens, e.g.:
    @media (max-width: 800px) {
      .your-element-class { position: absolute; bottom: 0; left: 0; right: auto; top: auto; }
    }
    
  2. 2 Posted by kevin on 28 Feb, 2018 11:01 PM

    kevin's Avatar

    Thanks. That is what I thought. I've been playing with the html/css. I was hoping that this was a built-in responsiveness feature.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac