Previous custom CSS codes get lost when updated with Simple Custom CSS!

Hello!
When I apply the below code with “Simple Custom CSS” for one of my pages it corrects the margin and everything looks fine. However, when I apply the same code below for another page (e.g. .page-id-66) it corrects this new page BUT the previous page (e.g. .page-id-38) goes back to its’ previous condition with a bigger margin!! it seems each time I apply a code in the “Simple Custom CSS” plugin the previous custom CSS codes are lost!! What is the problem? I’d appreciate it if you could help.

Website: www.cubexlab.com/wordpress
Code I apply in custom css:

.page-id-38 .page-wrap {
padding-top: 0;
}

.page-id-38 .page-wrap .content-wrapper {
padding: 0;
}

.page-id-38 .page-wrap .content-wrapper .row {
margin-top: -30px;
}

Hello there,

Thank you for letting us know about it.

What will happen if you add !important rules?

.page-id-38 .page-wrap {
padding-top: 0 !important;
}

.page-id-38 .page-wrap .content-wrapper {
padding: 0 !important;
}

.page-id-38 .page-wrap .content-wrapper .row {
margin-top: -30px !important;
}

Regards,
Kharis

Hi Kharis,

Thanks for your prompt response. Unfortunately it is responding the same and the issue wasn’t resolved with the important sign. SO what I’ve done for now is I just enter the below code to adjust all pages at once!! I know this is not a good solution because when I put in the below code and all the pages are ok then after I even submit an “empty code” through “Simple Custom CSS” then all the previous changes go out! It seems the custom css codes get lost after each time I enter a code with the “Simple Custom CSS”

.page .page-wrap {
padding-top: 0 !important;
}

.page .page-wrap .content-wrapper {
padding: 0 !important;
}

.page .page-wrap .content-wrapper .row {
margin-top: -30px !important;
}

Hello there,

Thank you for updating me.

There might be other plugin interferes the Simple Custom CSS’ style rules output. Could you please try to temporarily deactivate all non-required plugins? Once you are done, then insert your CSS code again. Let me know how it goes.

Regards,
Kharis

Hello Kharis,

I deactivated nearly all plugins but it still didn’t work. Is there any other plugin for custom css that I can try instead of the simple cutom css plugin?

Thanks

Kharis I’m thinking initially first I applied this code it didn’t have this problem. But I guess this problem started when I changed Permalink Settings from “Plain” to “Post Name” and then I tried to apply the below code for the about page but it didn’t work so I returned the permalink back to “Post Name”. But I think it was after this that this problem occurred. Is there a way to reset all css changes I made? I’m afraid maybe I changed something wrong in the css file that I didn’t know.

The css I applied for the post name permalink:

.about .page-wrap {
padding-top: 0 !important;
}

.about .page-wrap .content-wrapper {
padding: 0 !important;
}

.about .page-wrap .content-wrapper .row {
margin-top: -30px !important;
}

Hello there,

I thought one of the following plugins would be worth to try.

Regards,
Kharis

Hello there,

I can’t replicate the issue on my end. It works fine on both “Plain” and “Post Name” permalink setting.

> Is there a way to reset all css changes I made?

I’m afraid the plugin doesn’t have an option to do that. The style rules you are having in the Simple Custom CSS editor box is what currently saved in the database. There is no way to reset it, even from database side.

Regards,
Kharis

Hi Kharis,
Good news I just tried the css commands through “WP Add Custom CSS” plugin and everything is now fine! Thanks for all your help and support really appreciate it!

Just one last question:
As you can see on our website I have put some custom default headers on each page with a certain image through background image of the row command with Page Builder. Since the image is larger that the Space width I defined for the row it only shows a portion of that image. I was wondering whether I can move this background image inside the row so that I can show a different part of the image which is more below the current part.

For example this page: www.cubexlab.com/wordpress/?page_id=205

Is there a way that I can move the thumbnail of the header image further down so I can show the texts of the image?

Hello there,

Glad to know that the custom CSS issue has been resolved.

I would like to apologize in advance for delayed respond.

> Is there a way that I can move the thumbnail of the header image further down so I can show the texts of the image?

I am afraid that it isn’t easy to achieve. It can’t be completely done on desktop nor mobile screen. Apologies, I don’t have any clue.

Regards,
Kharis