Category and Widget Underlines

Activello
1

Hello

I have tried to use this code to reduce the height of the lines under catergories per post and side widgets:

#page article.post .post-categories:after,
#page .post-inner-content .cat-item:after,
#secondary .widget-title:after {
height: 1px;
}

It works randomly and not for all.

I requested code to make it apply to all and was refused.

I have spent hours trying to search for other code.

I would like to post the entire custom css I have on my site and see if you can find a conflict for the code above.

Thank you,
Lucy

2

Custom CSS:

.site-navigation-inner.col-sm-12 {
display: none;
}
.site-navigation-inner .nav-search {
display: none;
}
.copyright {
display: none;
}
body { font-size: 15px !important; }
#page .entry-title {
font-size: 26px;
}

.widget_text .textwidget {
font-size: 14px;
}
@media (min-width: 992px){
.container {
max-width: 1190px;
}
div#secondary {
width: 28%;
float: right;
}
.main-content-inner.col-md-8 {
width: 70%;
}
}
#page .read-more {
display: none;
}
.slideshow-window {

background-color: #fff !important;
border-color: #fff !important;
}
.archive.category #main > header.page-header {
display: none;
}
#secondary .widget h3 {
font-size: 12px;
}
html body {
color: #111;
}
#page .entry-title,
#page .entry-title a {
color: #111;
}

#page #secondary .widget-title {
color: #111;
}
.slideshow-slide-caption {
background: rgba (0, 0, 0, 0);
height: auto;
color: #252525;
text-shadow: none;
}
.post-inner-content .cat-item a {
color: #000;
}
#page .entry-content a {
color: #7c7c7c;
}
.blog.home #page article.post {
width: 100%;
padding: 0;
}
#page .post-inner-content {

border-bottom: 1px solid #dedede;
padding: 50px 0;
}
body.blog #page article:first-child .post-inner-content {

border-top: 1px solid #dedede;
}
h1.page-title {

display: none;
}
body.single-post #page .post-inner-content {

padding-top: 0;
} #page .post-inner-content {

padding-bottom: 30px;
margin-bottom: 0;
}
body.search #page article:first-of-type .post-inner-content, body.category #page article:first-of-type .post-inner-content{

padding-top: 0;
}

body.search #main > header.page-header {

display: none;
}

3

Hello Lucy,

I hope you are doing well today.

I have looked at the CSS you provided but I do not see an errors. Could you please provide a link to your website so that I can inspect that too?

Best Regards,
Support

4

Thank you:

5

Hello there,

I hope you are doing well today.

I was able to inspect your website and found a possible solution.

You can use the following CSS code to reduce the lineheight by going to Appearance > Customize > Additional CSS and pasting it there.


/*Post Category Line*/
article.post .post-categories:after, .post-inner-content .cat-item:after {
    height: 1px;
}

Best Regards,
Support

6

Thank you but this has not worked properly.

I have used the code and again some posts now show with no line under the category:

4th post on page 1
5th post on page 2
5th post on page 3
And on.

I really need something in the code that overrides any previous programming and applies the code to all.

HOWEVER all lines show on the mobile device.

I would also like to do the same for the lines underneath the widget titles. Can you provide code to change their height too?

7

No problem for the widgets - I just need help with the category lines.

8

Hello there,

Thanks for updating us.

The height seems to get reduced to 0.5 px so please replace the previous code with this new one to ensure that the line remains at 1px:


/*Category line height*/
article.post .post-categories:after, .post-inner-content .cat-item:after {
    height: 1px !important;
}

Best Regards,
Support

9

Hello

  1. I want the height 0.5px.
  2. If it is set to 1px some randomly show as 0.5px anyway.
  3. I need code that sets all at the specified height for desktop mode. Mobile mode shows all the lines.

Thank you,
Lucy

10

Hoping to get an answer for this! Thank you!

11

Hi Lucy,

I see that all the categories are having underline in the shared link, also there is no 0.5px in the browser, the minimum we can set is 1px, we can’t split a px.

I didn’t understand the 3rd point you said, what you want to change.?

Let us know,

Thanks,
laranz.

12

Hello

When I use the code provided with 1px some of the lines underneath the categories above the post headings show as 0.5px.

So I set it as 0.5px to counteract this but now some of the lines have disappeared.

All of the lines show on a mobile device. Some of the lines are missing on a desktop.

Please use a desktop to visit www.theloveplace.co.uk and you will see that the last post is missing the line and more posts on the older pages.

13

Hello Lucy,

I hope you are doing well today.

When I set the height to 1 px all the lines appear however when the height is set to 1.5 px the line height appears the same as if it was to 1 px because as said before the browser cannot split a pixel.

Best Regards,
Support

14

Did you follow the link in desktop to see that some lines are missing?

Why would some be missing?

Why are no lines missing on a mobile browser?

0.5px works and 1px doesn’t because the lines missing at 0.5px show as 0.5px when I use the code for 1px.

It doesn’t work which is why I keep asking for help.

Please answer my questions and address why the lines show on a mobile but not a desktop.

15

Please help!

Visit the site today and you’ll see the line is missing from the second post on the first page and others on other pages.

When I use 1px the missing lines become 0.5px

Somewhere something is creating a conflict with the code and it doesn’t matter if it’s set to 1px or 0.5px

Please investigate! I need to fix this issue! Surely the fact that ALL lines show at 0.5px on a mobile browser means this is an issue with desktop mode and can be fixed!

16

Mobile view:

17

Desktop view:

18

Hi,

Add this Custom CSS in Appearance -> Customizer -> Additional CSS,

article.post .post-categories::after, .post-inner-content .cat-item::after { height: 1px; }

Let us know,

Thanks,
laranz.

19

Hi Laranz

Same problem with this code - set to 1px some are showing as 0.5px

Set to 0.5px some are missing…

20

Hello there,

I hope you are doing well today.

This is a strange issue because whenever I test your website with the CSS code below the line appears on all the posts:


article.post .post-categories::after, .post-inner-content .cat-item::after {
    height: 1px;
}

Please try disabling any third party plugins that you may have active because one of them may be causing a conflict here.

Best Regards,
Support