Edgeless display for a sparkling page

Sparkling
1

Hi There,

I’m working on a new frontage for my site:

The top part of the page uses a slider (SiteOrigin Slider Widget). My problem is I want to make it “edgeless”, just like how sparkling displays featured images in posts.

In order to do this, I’ve set the page title display to none, and also, tried to remove any padding between the widget and the edge:

.page-id-2302 div.post-inner-content {padding:0px;}

However, I still have a considerable space between the widget and the edge of the main content area and no matter how much I look into the CSS, I can’t find the code that’s responsible for this.

Any ideas?

Thanks,
K

2

HI Kasra,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

body.page-id-2302 .post-inner-content {
    padding: 0;
}

body.page-id-2302 #pg-2302-1 {
    padding: 45px 50px;
}

body.page-id-2302 .sow-slider-image-wrapper {
    max-width: 100% !important;
}

Best Regards,
Movin

3

Hi Movin,

Thank you very much for the code. I’ve updated the page, but still I have a tiny space above the slider:

Will you please help me with that?

Thanks,
Kasra

4

To remove that space, please also use below custom CSS code along with above shared CSS code.


body.page-id-2302  .entry-content {
    margin-top: 0;
}
5

Done! Thank you very much!
Kasra

6

You are most welcome here :slight_smile: