Use a CSS plugin like Jetpack or Custom CSS Manager and add this CSS rule:
.site-content article {
border-bottom: 0;
}
Hi,
Thank you for that help. It worked fine. If I want to narrow the white area where the lines where, how can I do that?
.site-content article {
padding-bottom: 0;
margin-bottom: 0
}
Or make the values greater than 0 if you want more spacing.
Hi could you assist me with one more thing 🙂 ?
I have this url: http://byggprojektoren.se/om-byggprojektoren/
And I want to narrow the distance between the bottom of where it says Byggprojektören innehar F-skattsedel.
and the top of the picture? Where in CSS can I do that? Thank you.
Give this a try:
.entry-content #pg-22-0,
#pg-22-0 p {
margin-bottom: 0;
}
Worked very good!Thumbs up for you.
How did you know that you should adjust there? Becuase I was looking on the website for a very long time but could not find where to adjust it?
You can use a web debugging tool like Firebug (a free extension for Firefox) or Chrome Developer Tools (which comes built in with Chrome). With Chrome DevTools, all you need to do is right-click on a web element, select Inspect element from the pop-up menu, and you’ll be able to see all of the CSS rules which affect that element.
Thank you very much for this useful information!
Hi again,
I wanna adjust the distance between two picture, see link, and I have found the following CSS using your advice with google chrome:
#pg-28-0, .panel-grid-cell .panel {
margin-bottom: 30px;
}
But it does unfortunately not work, how come?
OK, if you inspect the top panel using Chrome DevTools, you’ll see in the right pane that the CSS that you posted is struck out because there is another rule above that that looks like this:
/* fixar avståndet mellan bilderna i "Projekt" */
.entry-content #pg-28-0,
#pg-28-0 p {
margin-bottom: 20px;
}
This rule is located in your Custom CSS Manager.
The reason why this rule takes precedence over the other rule has to do with CSS specificity. The way that CSS works is that if there are multiple rules which apply to the same object, then the rule with the greatest specificity takes precedence over the rules with lesser specificity. The way that you calculate specificity is that you take the selector and give one point for each element type, 10 points for each class name, and 100 points for each ID.
So this selector, #pg-28-0, gets 100 points for the ID, but this selector, .entry-content #pg-28-0, gets 110 points because there’s 100 points for the ID plus another 10 points for the class name.
If two selectors have the same specificity value, then the rule which comes last will be used.
So you have a few options:
- You can remove the selector from the rule in Custom CSS Manager.
- You can change the value of margin-bottom for the rule in Custom CSS Manager.
- You can add the .entry-content class name to your new rule’s selector so it has the same specificity as the rule in Custom CSS Manager. This should work since the inline stylesheet comes after the Custom CSS Manager stylesheet:
.entry-content #pg-28-0, .panel-grid-cell .panel {
margin-bottom: 30px;
}
Great information, I appreciate you taking your time, again, explaining it to me! Kudos to you mister.
Regards,
