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
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.
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;
}
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.
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?
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
