Nearby Slides Problem with Responsive design

adamsphotoart's Avatar

adamsphotoart

04 Jan, 2015 03:35 PM

Hello Dima,

I am almost there with the Nearby slider option, but I have two issues:

http://www.adamsphotoart.co.uk/seat/

1. It does not look good on my mobile phone. For some reason it squashed the whole page to the left - please see the screenshot...

2. In Firefox, when using the keyboard navigation to the right, it actually moved the whole website to the left for some reason - please see the screenshot as well.

I am not that good at CSS, but the info I found in Roaylslider support made me to enter the following and it seems to be working fine in Safari and Chrome but not on my mobile (Samsung Galaxy 3) and in Firefox.

CSS I entered (after disabling Scaling and centring the image in the roylslider option), and unchecking the box for Nearby Slider:

.rsImg { margin-top: 4px !important; }
.royalSlider { margin: 0 auto }

.rsOverflow { overflow:visible !important; }

.royalSlider img {
    width: 100%;
    height: auto;
    margin: 4px auto;
    
}

When I was having the Nearby Slide option ticked in it was displaying the photos in a SQUARE format and not full size as they are 900x600 hence I went for the custom CSS , but maybe I did something wrong :)

Please advise,

All the best ,

Adam

  1. Support Staff 1 Posted by Dmitry Semenov on 04 Jan, 2015 05:03 PM

    Dmitry Semenov's Avatar

    Hello,

    In Firefox, when using the keyboard navigation to the right, it actually moved the whole website to the left for some reason - please see the screenshot as well.

    Make sure that horizontal scroll of browser isn't allowed, e.g. wrap slider with some 100% width div with overflow:hidden, or add overflow-x:hidden to body and html.

    Slides just aren't cropped, as you removed overflow:hidden from slider wrapper,

    It does not look good on my mobile phone. For some reason it squashed the whole page to the left - please see the screenshot...

    Same as above.

    Also, consider enabling auto-scale-slider option in Size & Scaling section, or change height manually via CSS media queries.

    Dmitry

  2. 2 Posted by adamsphotoart on 04 Jan, 2015 07:15 PM

    adamsphotoart's Avatar

    Thanks a lot for prompt reply

    adding the

    overflow: hidden to the wrapper did the trick

    Thanks a lot

    Love the slider ;)!!!!!!

    Adam

  3. 3 Posted by adamsphotoart on 10 Jan, 2015 12:28 PM

    adamsphotoart's Avatar

    Dima, I have one more small issue withe display of pin it button on Safari. It work fine in Chrome and Firefox but in Safari is only visible on the left slide;

    please have a look at :

    http://www.adamsphotoart.co.uk/greek-wedding-photographer-london/

    the mark up I use is:

    <div class="rsContent">
      <a href="http://pinterest.com/pin/create/button/?url=http://www.adamsphotoart.co.uk/&media={{image_url}}&description={{title}}" target="_blank">Pin It</a>
      {{image_tag}}
      {{thumbnail}}
      {{html}}
      {{animated_blocks}}
      {{#link_url}}
      <a class="rsLink" href="{{link_url}}">{{title}}</a>
      {{/link_url}}
    </div>

    Please advise,

    thanks a lot

    Adam

  4. Support Staff 4 Posted by Dmitry Semenov on 11 Jan, 2015 02:23 PM

    Dmitry Semenov's Avatar

    Hello,

    I don't see any issues in FF for some reason, can you please provide screenshot of issue?

    Dmitry

  5. 5 Posted by adamsphotoart on 11 Jan, 2015 03:44 PM

    adamsphotoart's Avatar

    Hello Dimitry,

    Thanks a lot for your prompt reply :)

    For example here

    http://www.adamsphotoart.co.uk/asian-wedding-photography-london/

    In Firefox the pin it button is visible in the centre photo but in Safari is not, and you cannot actually pin the photo.

    please see the screenshots,

    thanks

    Adam

  6. Support Staff 6 Posted by Dmitry Semenov on 12 Jan, 2015 12:52 PM

    Dmitry Semenov's Avatar

    Oh, likely related to http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/font... (try adding -webkit-backface-visibility:hidden to button).

  7. 7 Posted by adamsphotoart on 12 Jan, 2015 01:33 PM

    adamsphotoart's Avatar

    Thanks Dimitry,

    Not sure where to add that?:)

    Shall add it somewhere to the mark up below or somewhere in the CSS files?

    <div class="rsContent">
      <a href="http://pinterest.com/pin/create/button/?url=http://www.adamsphotoart.co.uk/&amp;media={{image_url}}&amp;description={{title}}" target="_blank">Pin It</a>
      {{image_tag}}
      {{thumbnail}}
      {{html}}
      {{animated_blocks}}
      {{#link_url}}
      <a class="rsLink" href="{{link_url}}">{{title}}</a>
      {{/link_url}}
    </div>

    Please advise,

    thanks a lot lot

    Adam

    ps. Disabling CSS in the miscellanies resolved the issue but created a different one - the main photo also got the same opacity as the two on the sides so was not clear to see :)

  8. Support Staff 8 Posted by Dmitry Semenov on 12 Jan, 2015 02:41 PM

    Dmitry Semenov's Avatar

    CSS code can be added to any .css file on page with slider, e.g. in style.css of your theme. With markup like yours you can add:

    .rsContent a {
        -webkit-backface-visibility:hidden;
    }
    

    (and style will be applied to all A elements that are children of rsContent)

    Dmitry

  9. 9 Posted by adamsphotoart on 12 Jan, 2015 04:08 PM

    adamsphotoart's Avatar

    Thanks Dimitry for your prompt replay.
    But for some reason adding

    .rsContent a {
        -webkit-backface-visibility:hidden;
    }

    to my stylesheet.css file didn't solve the issue, the pin it button still lode snot appear in Safari - well it appears for a fraction of a sec on and then disappears ...

    I also tried to add the code t royal slider.css file but it didn't help either - any further ideas? :)

    thanks a lot

    Adam

  10. Support Staff 10 Posted by Dmitry Semenov on 12 Jan, 2015 06:17 PM

    Dmitry Semenov's Avatar

    Try also adding z-index, e.g.:

    .rsContent a { 
    
    z-index: 100;
    
    }
    
  11. 11 Posted by adamsphotoart on 12 Jan, 2015 06:23 PM

    adamsphotoart's Avatar

    You are a Star *****, thanks a lot Dimitry,it works well :) !!!!

    thanks a lot of your help,

    Adam

  12. 12 Posted by Lord on 09 Nov, 2017 07:20 AM

    Lord's Avatar

    Hi! Setting the div to max-width: 100%, and also overflow-x:hidden worked, but not on Chrome on mobile. Any idea how to fix? Thanks!

  13. Support Staff 13 Posted by Dmitry Semenov on 09 Nov, 2017 08:15 AM

    Dmitry Semenov's Avatar

    @Lord, try applying overflow:hidden to an element that wraps the slider, and not to the body.

  14. 14 Posted by Lord Acuña on 09 Nov, 2017 09:42 AM

    Lord Acuña's Avatar

    Yup, that's what I did! It worked perfectly for Safari mobile and Firefox
    mobile, but not Chrome mobile.

  15. Support Staff 15 Posted by Dmitry Semenov on 09 Nov, 2017 05:59 PM

    Dmitry Semenov's Avatar

    @Lord Acuña, can you please open a separate private ticket and link to the page with the issue? (or post it here if you don't mind it being public)

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2015-01-04_at_15.26.38.png 1.13 MB
  • royalslider_issu.jpg 47.3 KB

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