Make Slider full width

  • Halo again,

    After finally having the site public,I ‘d like to indicate following Problem.

    I use Crelly Slider inside a Siteorigin Editor Row with Full width Layout.
    Although the Home Page Slider is Full width the margins remain.
    Maybe its wrapped inside a div?
    Applying the same styling in the Row with a picture umderneath was successful.

    Ideally, I want the white spaces around the Slider to disappear.
    Thank you in advance for ..any Idea.

    https://cartesiuscoffee.gr/

    Alex GR

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

  • here is a super hacky way to get gett done

    .siteorigin-panels-stretch.panel-row-style {
    padding-left: 37.9% !important;
    padding-right: 0 !important;
}
.crellyslider {
    margin: 0 !important;
    margin-bottom: -54px !important;
    width: 100% !important;
}
.cs-slide {
    margin: 0 !important;
    width: 100% !important;
}
#main {
    padding-top: 0;
}
#page {
    margin-top: -24px;
}

    it will probably have undesired effect on rest of site

    Theme Author Shaped Pixels

    (@shaped-pixels)

    A little difficult because it’s a page builder, but, after trying a few options, I came down to this one:

    .home #main {
    padding: 0;
}

    Then make any padding or margin adjustments as needed to that. Your slider will also need to compensate for the width, especially if you want it to be a fluid width for larger screens.

    The custom CSS I have above will focus on the home page only.

    Thread Starter Alex GR

    (@alex-gr)

    Thank you for your time and interest Mr Case and once again Shaped Pixels.

    Both methods fix the Slider Placement but also influence undesirable the Rest of the Page,
    How could I fix it ?

    try this. target the first element specifically using its ID

    #pg-4331-0 .siteorigin-panels-stretch.panel-row-style {
    padding-left: 37.9% !important;
    padding-right: 0 !important;
}
.crellyslider {
    margin: 0 !important;
    margin-bottom: -54px !important;
    width: 100% !important;
}
.cs-slide {
    margin: 0 !important;
    width: 100% !important;
}
#main {
    padding-top: 0;
}
#page {
    margin-top: -30px;
}
    Thread Starter Alex GR

    (@alex-gr)

    Thank you Mr Case for your helpful suggestions, with a delay due to Christmas.

    It seems to work fine in the Desktop Screen but if you turn to smaller portrait form screens , where the left Header design transforms to Top Header, the Slider is misplaced.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I just checked your site out and squeezed my browser down to mobile sizes, but on my end, your slider looks very good with perfect margins around it. I also used my phone to view it and my ipad.

    I’m thinking perhaps it’s a browser issue…is it possible for you to make a screenshot of what you are seeing as being “misplaced”? Also, what browser are you viewing it in?

    Thread Starter Alex GR

    (@alex-gr)

    Shaped Pixels,

    In my comment I was referring to the implementation of the CSS changes proposed by Mr Case, in his latest contribution, following the discussion to make the Slider full width.
    The above CSS change leaves, just in the Top Menu Version (small screen), a big white column on the left side of the Slider, on my side (Ffx Browser). The rest of the Page is , I think, OK.

    Where you referring to the same case or to the initial CSS setting ?

    Alex GR

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Make Slider full width’ is closed to new replies.