CSS: How to remove borders on Wordpress theme

Question

I'm working with the Brunch Pro theme for Wordpress and am seeing a 1px border under each of my entires on the homepage, as well as below each widget in the sidebar. I would like to get rid of those.

You can see my site here. I've attempted to edit these lines in the stylesheet but have gotten no result:

.featured-content .entry {
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

.sidebar .widget {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 40px;
}

There must be something I don't understand. This theme loads all of my posts into a widget area, which is not something I'm used to. Can anyone help me with this, please?

I don't see the borders. Can you post a screenshot? :) Edit: I see the borders below the widgets not the entries though. — m4n0, Jun 20 '18 at 18:47
Have you tried it in /wp-content/themes/brunch-pro/style.css @ line 1111? — emjay, Jun 20 '18 at 19:00

Xhynk · Accepted Answer · 2018-06-20T19:05:40.443

2

Your style.css file still appears to show border-bottom: 1px solid #eee;, are you sure the changes have been committed?

You may be better off just adding the following in the Appearance > Customizer > Additional CSS section of your site:

.sidebar .widget,
.featured-content .entry {
    border-bottom: 0;
}

edited Jun 20 '18 at 19:05

answered Jun 20 '18 at 18:57

Xhynk

13,513
8
32
69

It's seems to be saving my changes when I go into the editor to change the code but I'll give that a shot right now. – Julie Jun 20 '18 at 19:00
I can see the `style.css` file has a missing line where the border declaration was for `.featured-content .entry {`, (line 1112) but it doesn't appear the same change has been made to `sidebar .widget {` (line 1859). Though as a note, you should be careful using the Appearance Editor (especially when editing PHP files, not so much CSS files). Typically for "per site" CSS changes, you're better off with a custom stylesheet or using the customizer anyways. Glad to help! – Xhynk Jun 20 '18 at 19:03

score 0 · Answer 2 · answered Jun 20 '18 at 18:51

0

In your styles.css change

.featured-content .entry {
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.sidebar .widget {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 40px;
}

to

.featured-content .entry {
    border-bottom: 0;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.sidebar .widget {
    border-bottom: 0;
    margin-bottom: 20px;
    padding-bottom: 40px;
}

answered Jun 20 '18 at 18:51

Axion

682
4
20

But she said she had edited those. It can be a cache issue. – m4n0 Jun 20 '18 at 18:52
yep, I already did that. I checked multiple browsers and it still shows. – Julie Jun 20 '18 at 18:54

score 0 · Answer 3 · answered Jun 20 '18 at 18:52

0

Try setting border: none;

If that's overwritten by WordPress do it like this: border: none !important;

answered Jun 20 '18 at 18:52

Jacob-Jan Mosselman

801
1
10
18

hmm that still doesn't appear to be doing anything. – Julie Jun 20 '18 at 18:57
1

You should avoid the use of frivolous `!important;` declarations. The selectors that are causing the issue aren't specific enough to warrant that, and WP itself isn't touching them, just the two selectors in the `style.css` file. – Xhynk Jun 20 '18 at 18:58
euhm, she said each widget and each entry so should be specific enough. And yes I agree, you better avoid using `!important` but sometimes there's not really any other solution. – Jacob-Jan Mosselman Jun 20 '18 at 19:13

CSS: How to remove borders on Wordpress theme

3 Answers3