Responisve Issue

  • Resolved Ibby

    (@ibby)


    9 years, 8 months ago

    Hi SS Support,

    Thank you for the Smart Slider plugin, it is amazingly customisable, even for the free version, and I will be purchasing the pro license to support you.

    I’m having a small problem with mobile and tablet alignments. When resizing the browser window to check my homepage, my page container is aligning to the left. I have checked this on my iPhone and the same thing is happening. My CSS is all set up to have the page container center aligned but I think this is happening because of the maximum width property in the slider settings. The maximum width for the responsive slider is set to 440px (mobile portrait). Is there a way to have the slider re-size dynamically? I tried using the ‘Real Device Detection Only’ option but it didn’t seem to have any affect.

    Any help would be appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Ramona

    (@nextend_ramona)

    9 years, 8 months ago

    Hi @ibby

    Is the upscale and downscale turned on at the Slider settings -> Size tab -> Responsive mode: Auto? (Learn more about the Auto responsive mode here http://doc.smartslider3.com/article/398-responsive-mode-auto )

    • This reply was modified 9 years, 8 months ago by Ramona. Reason: typo
    Thread Starter Ibby

    (@ibby)

    9 years, 8 months ago

    Hi Ramona,

    Thanks for taking the time to get back to me.

    Yes, I’ve just checked and the responsive mode is set to ‘auto’ and both upscale and downcale are enabled. The slider height is set to 0-3000px and the max width is set to 3000px.

    For some reason, as I resize my browser window, the slider doesn’t fluidly resize, but at certain points, it jumps to a certain size. I have a hunch that this is because of the ‘maximum screen width’ setting of the general slider settings (so it seems to be resizing based on the widths defined as ‘desktop portrait’, ‘tablet portrait’, ‘mobile portrait’ etc.

    Plugin Support Gabor

    (@nextendweb_gabor)

    9 years, 8 months ago

    Hi @ibby!

    Please send me a link to your website!

    This problem sounds like, when the upscale and downscale isn’t turned on, but if it is, then our slider is scaling up to the containing div, where you put it, so it’s also possible, that your theme is changing the location where you put the slider this way.

    Thread Starter Ibby

    (@ibby)

    9 years, 8 months ago

    Hi @gabor,

    Thank you for offering to have a look. The strange thing is, if I disable the slider, the whole site correctly aligns to the center. For some reason it is only happening when the SS is placed in the page.

    The website is here.

    Plugin Support Gabor

    (@nextendweb_gabor)

    9 years, 8 months ago

    Not really sure, why is this happening only with our slider, but how your website looks like everything is coming from your theme. If you just remove this one css code, that will make your site to not to jump at certain points, but fluidly go smaller:
    http://myvitopia.com/wp-content/themes/fruitful/style.css
    line 60.:

    .container .column, .container .columns {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

    remove the float:left; from it:

    .container .column, .container .columns {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}
    • This reply was modified 9 years, 8 months ago by Gabor.
    Thread Starter Ibby

    (@ibby)

    9 years, 8 months ago

    Thank you very much, that fixed it!

    I can’t believe I missed it. 🙂

    So does the fluid responsiveness not work if the main page container is aligned to a side? Interesting to note for the future if that’s the case.

    • This reply was modified 9 years, 8 months ago by Ibby.
    Plugin Support Gabor

    (@nextendweb_gabor)

    9 years, 8 months ago

    I’m glad I could help!

    When elements are floating, their widths are handled differently by browsers, so in this case the left floating made the columns’ widths to not be responsive to the width of the browser, just “float” where they are.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Responisve Issue’ is closed to new replies.