Twentyseventeen: how to hide thin line between page and posts?

manuschwendener · Member · Mar 5, 2018 at 9:22 am
Copy link

Add topic to favorites
Hi

We’ll soon be going live (for the moment it’s only test entries).

I want to use the parallax photo in the lower part – which means I need to have a static page. (Otherwise I could just put the welcome message above the blog posts.)

Is there a way to remove the thin line between ‘Willkommen’ and ‘Neueste Beiträge’ on the main page? Or set it to white?

Thank you :-)

The blog I need help with is: (visible only to logged in users)
skobraf · Member · Mar 5, 2018 at 9:45 am
Copy link
Hi

You can set the line between the 2 articles to white by adding this line of CSS to your code
```
.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child), .widget ul li {
    border-top-color: white;
}
```
Or you can just remove it by adding this code:
```
.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
    border-top: 0px;
}
```
Here is how to add CSS to your website: https://en.support.wordpress.com/custom-design/editing-css/

If needed anything else please let us know

Regards,
Skobraf
shubhamgmath · Member · Mar 5, 2018 at 9:50 am
Copy link
Hi manuschwendener

Is there a way to remove the thin line between ‘Willkommen’ and ‘Neueste Beiträge’ on the main page? Or set it to white?

– To remove that you need to change some css code ie you have to remove the article border-top property.

//Old code:
```
.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
     border-top: 1px solid #ddd;
}
```
//new code
```
.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
     border-top: 0px;
}
```
Custom CSS can only be added if you are under premium or business plan.
To know more about how to add custom CSS please refer to the link below:
https://en.support.wordpress.com/custom-design/editing-css/

To know more about the plans and there features visit the below link:
https://wordpress.com/pricing

Hope this helps.
shubhamgmath · Member · Mar 5, 2018 at 9:52 am
Copy link
Hi Skobraf

I missed out to refresh. Will take care of this from now.
manuschwendener · Member · Mar 5, 2018 at 10:07 am
Copy link
Thank you both, working fine :-)
manuschwendener · Member · Mar 5, 2018 at 10:09 am
Copy link
Would there also be a way to make the distance a bit smaller, i.e. remove a bit of white space above ‘Neueste Beiträge’?
shubhamgmath · Member · Mar 5, 2018 at 10:35 am
Copy link
Hi manuschwendener

Please add the below code for removing the bottom padding of each panel to remove the space:
```
.panel-content .wrap {
    padding-bottom: 0em !important;
}
```
Hope this helps.
manuschwendener · Member · Mar 5, 2018 at 10:45 am
Copy link
Thank you. Can I limit this to panel1?
I tried

`
#panel1 .panel-content .wrap {
padding-bottom: 0em !important;
}
`

but that’s not working.
shubhamgmath · Member · Mar 5, 2018 at 10:55 am
Copy link
Hi

Can I limit this to panel1?

Means you just want to remove bottom padding for panel 1 And you are fine with the space above Neueste Beiträge.
manuschwendener · Member · Mar 5, 2018 at 10:55 am
Copy link
Exactly
shubhamgmath · Member · Mar 5, 2018 at 11:00 am
Copy link
Then just add the below code and remove the code that I gave you before:
Code not to be used :
```
.panel-content .wrap {
    padding-bottom: 0em !important;
}
```
New code that needs to be added:
```
article#panel1 .panel-content .wrap {
    padding-bottom: 0em !important;
}
```
Hope this helps
manuschwendener · Member · Mar 5, 2018 at 11:31 am
Copy link
This is not the solution, sorry. The white space above ‘Neueste Beiträge’ is back, and ‘Ältere Beiträge’ still too close to the picture.
shubhamgmath · Member · Mar 5, 2018 at 11:45 am
Copy link
Hi there

Can I limit this to panel1?

Means you just want to remove bottom padding for panel 1 And you are fine with the space above Neueste Beiträge.

Here i was just little misunderstood sorry for my mistake i taught you are happy with the original space above Neueste Beiträge.

Please remove all the code we entered til now and use the below codes :

This is for removing the space above Neueste Beiträge.
```
article#post-2 .panel-content .wrap {
    padding-bottom: 0em !important;
}
```
And i taught you need 0px padding for the panel 1 also but if you need little space between the Ältere Beiträge and the image then you need to keep little padding
```
article#panel1 .panel-content .wrap {
    padding-bottom: 2em !important;
}
```
This will work properly. Due to some misunderstanding, I asked you before to just add that code. But know these both codes will work fine as per your requirement.
Hope this helps.
manuschwendener · Member · Mar 5, 2018 at 12:01 pm
Copy link
Thank you, shubhamgmath :-)
shubhamgmath · Member · Mar 5, 2018 at 1:43 pm
Copy link
You’re welcome.

No items found.