This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to make slider entire width of browser

  • Creator
    Topic
  • #16669
    youthman
    Member

    Hi, I need to make the slider the entire width of the browser and responsive. Can this be done with one of the three sliders that come with Alyeska? I also have purchased Revolution Slider that I can install if that will work.

    I see in your demo that you can choose full width instead of boxed but I do not see that in the Theme Options. Maybe I’m missing it.

    Thank you for your help.

    Michael

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #16670
    youthman
    Member

    I found in the theme where I can change from Boxed to Wide but the slider is still constrained to the width of the website. Is there a way to allow the slider to be full with of the entire browser width?

    #16682
    Jason Bobich
    Keymaster

    Hello Michael,

    Unfortunately there is no feature for any of the sliders of the theme where this will be possible.

    A third-party plugin like Revolution slider will not work by default to be full width because the issue still remains that the theme’s inner container holding the content does not expand to be full-width, which is what you’re putting the Revolution slider into. You’d need to re-structure that containers of the theme with CSS where your slider is placed.

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

    For example, maybe you placed a Revolution slider shortcode instance in a content element of the featured area of a custom layout in the Layout Builder. You could style all featured areas in the theme to be full width like this (while in the stretch layout):

    #featured .featured-inner { width: auto; }
    #16684
    Jason Bobich
    Keymaster

    I was just messing with this in the browser, and interestingly here’s the effect on the theme’s default standard slider.

    #16747
    youthman
    Member

    Thanks for the info. I had already moved to a different theme because I needed to get moving on this site ASAP. I’ll use the Alyeska for another client in the future. Thanks.

    #17327
    milleottani
    Member

    Hello,
    i need to do the same thing you did in the picture over here, how can i do?

    Thank you!
    M-

    #17331
    Jason Bobich
    Keymaster

    i need to do the same thing you did in the picture over here, how can i do?

    1) Go to WP Admin > Appearance > Theme Options > Style > Body Shape, and select “Stretch”.

    2) Put your slider in the “Featured Above” area of a custom layout.

    3) In your custom CSS, remove width constraints on the featured area of the theme.

    #featured .featured-inner { width: auto; }

    ============

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.