Guide on how to make this slider full width

  • Resolved klewis

    (@blackawxs)


    5 years, 5 months ago

    I’m running…
    * WordPress 5.2.1
    * WooCommerce 3.6.4
    * StoreFront 2.5.0
    * Slider Ultimate 1.1.5

    – From wp-admin, on my Gutenburg homepage, I have Slider Ultimate loading as a shortcode:
    [ultimate-slider category='home']

    – On my same homepage I have the storefront ‘Homepage’ template attribute selected.

    – On the front end of the site, on the homepage, the slider itself will not go full width. The slider is impacted by the following CSS:

    .page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header {
    max-width: 41.0994671405em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    If I either increase the max-width, or replace it with width:100%; it breaks the look of the slider.

    What must I do to make this slider go full width, regardless of other elements wrapping around it? from edge to edge of my screen and still appear normal as a slider?

    • This topic was modified 5 years, 5 months ago by klewis.
    • This topic was modified 5 years, 5 months ago by klewis.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter klewis

    (@blackawxs)

    I resolved my issue by getting out of the homepage template and instead using the full width template. Also applying the following CSS…

     .home .col-full {
        width:100%;
        max-width: 84em;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        box-sizing: content-box;
    }

    …which gives the appearance of the slider being full width on most laptop devices. For larger screens, it will then set the max-width as directed.

    Thanks!

    • This reply was modified 5 years, 5 months ago by klewis.
    • This reply was modified 5 years, 5 months ago by klewis.
    Plugin Contributor etoilewebdesign

    (@etoilewebdesign)

    Awesome! Thanks for letting us know

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Guide on how to make this slider full width’ is closed to new replies.