[Support request] CSS is not working !!!

[Sanu Kumar]

Hi
I was just testing in the “General’ tab and now I see my CSS effects are not working. I want to restore them ASAP. Please help !!
You can see this: https://www.masteryblogging.com/black-friday-web-hosting-deals/

[David]

Hi there,

i am not sure what you mean by:

I was just testing in the “General’ tab

The General tab of what exactly ?

But … First disable any cache/opimization plugins and clear your browser caches.

[Sanu Kumar]

I tweak some settings under Customize > General and after doing this I lost all my customization which I had achieved using CSS code. I want to restore them.
See the image below, button doesn’t looks good:

Reference URL: https://www.masteryblogging.com/black-friday-web-hosting-deals/

In addition to this, I am using CSS code for link hover underline (only in the content) but after tweak in the General section, my all links are now underlined.

[Ying]

I’m not sure what you mean by CSS is not working, the buttons overlapping each other is because the CSS you added is working:
https://www.screencast.com/t/cnuRkSAoqc

The negative left margin is applied to the buttons.

In addition to this, I am using CSS code for link hover underline (only in the content) but after tweak in the General section, my all links are now underlined.

Did you change the Underline Links settings? Can you show me what CSS are you using to add the hover underline to links since I don’t see any CSS is added to achieve this right now.

Let me know 🙂

[Sanu Kumar]

Did you change the Underline Links settings?

Yes, I mark it.
OH Now, I understand where is the mistake. I applied that CSS to adjust the bullet list. but it also affects the button. Could you please help me to fix this?

It was working fine, That problem happened since we have added the CSS.

[Ying]

Can you show me what CSS are you using to add the hover underline to links since I don’t see any CSS is added to achieve this right now.

[Sanu Kumar]

I am looking to achieve something like this: bullet list (ignore Pros word for now).

and Here’s my CSS:

li::marker {
    color: #FF6200;
}
.entry-content li {
    margin-left: -40px;
    margin-bottom: .3em;
}

Could you help me to fix this code so that the overlapped button gets fix.

I am also using this CSS to but, it was working fine —- but now, it’s not working.

/* Start Border Single Post Layout */
.single .site.grid-container {
    border: px solid #cfcfcf;
	  padding-top: 0px;
    box-shadow: 0px 20px 40px 0px rgb(0 0 0 / 10%);
	}
body:not(.blog):not(.archive):not(.home):not(.coupon-template-default)
.single-post #page {
    margin-top: 40px;
	margin-bottom: 40px;
}
/* Mobile spacing */
@media(max-width: 768px) {
    .single-post #page {
        margin-top: 0px;
			margin-bottom: 0px;
    }
}

and the review table you see at the top, I achieved that design using this CSS

.review-title {
    background: #243641!important;
    color: #fff!important
}
.review-links {
    text-align: center;
    padding: 20px 20px 20px 20px
}
#review .review-links a {
	background:background: #ff00cc;
background: -webkit-linear-gradient(to right, #333399, #ff00cc);
background: linear-gradient(to right, #333399, #ff00cc);
    color: #fff;
	  font-size: 22px;
    font-weight: 700;
		border: 0;
	margin-left: 30px;
}
.review-links a:hover {
		text-decoration: underline! important;
	}
#review {
    display: block;
    position: relative
}
.reviewed-item {
    width: 30%;
    max-height: 190px;
    float: left;
	border: 0;
	min-height: 200px;
}
.reviewed-item-image {
    float: none;
    max-width: 100%;
    margin-left: 0
}
.entry-content .reviewed-item .reviewed-item-image img {
    box-shadow: none;
    border: none;
	border-radius: 0;
}
.review-total-wrapper {
    position: absolute;
    right: 0
}
.review-desc {
    width: 85%
}
.review-links {
    border-bottom: 0
}
.separate-containers .paging-navigation{
	padding:30px 0 30px 0;
}
@media(max-width:768px) {
	.separate-containers .paging-navigation{
	padding:20px;
}
    .review-total-wrapper span.review-total-box {
        font-size: 30px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden
    }
    .review-links {
        text-align: center
				
    }
    .reviewed-item {
        width: 100%;
        max-height: 100%
    }
    .review-total-wrapper {
        position: initial
    }
    #review .review-links a {
        font-size: 100%
				
    }
	
    .reviewed-item {
        text-align: center
    }
    .review-total-wrapper span.review-total-box {
        padding: 0
    }

I haven’t tweaked the code, but don’t know how it breaks.

[Ying]

Try this for the list and remove themargin-left: -40px;:

.entry-content  ul.review-links li {
    display: list-item;
}
 .entry-content .review-links li a {
    border: none;
}
.entry-content ul.review-links {
    padding-left: 54px;
    list-style: unset;
}

When I see your CSS, the first thing I noticed is the error in here, border width value is missing:

.single .site.grid-container {
    border: px solid #cfcfcf;
	  padding-top: 0px;
    box-shadow: 0px 20px 40px 0px rgb(0 0 0 / 10%);
	}

For the other 2 CSS, can you tell me exactly which part is not working?

[Sanu Kumar]

.entry-content  ul.review-links li {
    display: list-item;
}
 .entry-content .review-links li a {
    border: none;
}
.entry-content ul.review-links {
    padding-left: 54px;
    list-style: unset;
}

This CSS is working on a review-type box, I don’t want to make buttons into bullets.
I want to achieve the bullet list in contents only.

I want the review type box to remain the same as what I have achieved with the CSS (as shown above—last CSS)

and the table you see at the top is working fine on the mobile device. You can check it—-that should be shown on the desktop as well? Where is the problem—I am confused

[Sanu Kumar]

I see the code is fine, I have added too much CSS in the Additional CSS filed and when I paste the same code at the top, it works fine but at the same time, some other CSS effects? Why it’s happening—-previously it was working fine !!

[David]

If the CSS works when you add it to the top then it generally means there are errors in your CSS.
Any code that comes after an error may not work in CSS.

The Customizer > Additional CSS editor is not the best place for that large amount of CSS – its a complete pain to edit and check for errors.

Might be best downloading an IDE Application such as Atom on your desktop. Then copy and paste your CSS into the IDE – where you have more space to check for errors.

[Sanu Kumar]

so what should I do now? How to fix the problem

[Ying]

Might be best downloading an IDE Application such as Atom on your desktop. Then copy and paste your CSS into the IDE – where you have more space to check for errors.

Have you tried this method David suggested?

We can’t help with correcting your CSS, it’s not a theme issue.

I use this tool to check my CSS personally, you can also give it a try:
https://jigsaw.w3.org/css-validator/

[Sanu Kumar]

okay and is there any other way to go back to the previous interface of typography. I am using the latest one

[Ying]

I don’t see any reason that the new typography system would effect your custom CSS.

If you have a backup on your server, you should be able to roll back to the previous version of everything.

[Author]

Posts