Cannot apply additional css to anything
-
Why i cannot add addiontal css? for example i tried to color a svg path
section.guten-4qr4Df .guten-shape-divider.guten-shape-divider-bottom .guten-shape-fill path {
fill: rgba(167, 167, 239, 1) !important;
}Instead of white color, i tried with section in the beggining, tried with a pro snippet plugin i have, whats going on almost to any class any addiontal css doesnt display in front-end.
EDIT: Adding color to shape diviner also doesnt work , i have cleared cache and browser cookies for this..
-
This topic was modified 2 years, 1 month ago by
GIANNISCFA.
The page I need help with: [log in to see the link]
-
This topic was modified 2 years, 1 month ago by
-
Hello @gianniscfa,
Have you tried editing it from editor?And if you want to use Additional CSS, try using wordpress additional css first. You can find it in Appearance > Customize > Additional CSS.
-
This reply was modified 2 years, 1 month ago by
putra1arya.
probably you didn’t read my first message at all.
i tried to change the colour of divider by using additional CSS & also from the editor.
in front end it doesn’t display my colour, only if I edit it from the back end the editor like you said as well then there I see the colour, If I save then clear cache from the plugin, try another browser I don’t see the new colour set.
whats going on ?
Could anyone help me figure it out?
Hello @gianniscfa,
Did you edit the templates or the page?
If the section is inside the template then you need to change it from Appearance > Editor > Template. Then pick the template that you used for your page.
Could you please let us know which page you had trouble with and provide a step-by-step description of the actions you took on the page? And please provide us with your Gutenverse System Status.
Check your plugin. Try to deactivate one by one your plugins. There might be a plugin that prevents your additional CSS from making changes.i will look in to it today and be back to you asap thanks
Sir like i said i tried from the gutenverse editor and also by adding additional css but nothing works.
THEME INFO Theme Name : Waterlava Theme Version : 1.0.8 WordPress Environment Home URL : https://healthandbeautypodology.com/ Site URL : https://healthandbeautypodology.com Login URL : https://healthandbeautypodology.com/wp-login.php WP Version : 6.5.3 WP Multisite : - WP Debug Mode : Disabled PHP Memory Limit : 2048M WP Memory Limit : 40M WP Language : el WP Upload Directory : ✔ Number of Category : 1 Number of Tag : 0 Server Environment Server Info : LiteSpeed PHP Version : 8.1.27 PHP Post Max Size : 2048M PHP Time Limit : 360 PHP Max Input Vars : 5000 SUHOSIN Installed : - WP Remote Get : ✔ PHP Image library installed : ✔ PHP GD library installed : ✔ PHP GD WebP supported : ✔ PHP fileinfo library installed : ✔ CURL Installed : ✔ Active Plugins Code Snippets : by Code Snippets Pro - 3.6.4 Code Snippets Pro (Premium) : by Code Snippets Pro - 3.6.4 CookieYes | GDPR Cookie Consent : by CookieYes - 3.2.2 Google Analytics for WordPress by MonsterInsights : by MonsterInsights - 8.26.0 Gutenverse : by Jegstudio - 1.9.2 Hostinger : by Hostinger - 2.2.4 Hostinger AI Assistant : by Hostinger - 1.8.2 Omnisend Email Marketing : by Omnisend - 1.3.25 Rank Math SEO with AI Best SEO Tools : by Rank Math - 1.0.219 Really Simple SSL : by Really Simple Plugins - 8.1.1 Reviews and Rating - Google Reviews : by Noah Hearle, Design Extreme - 5.2 UpdraftPlus - Backup/Restore : by UpdraftPlus.Com, DavidAnderson - 1.24.3 WPForms Lite : by WPForms - 1.8.8.3 WP Mail SMTP : by WP Mail SMTP - 4.0.1 WP Super Cache : by Automattic - 1.12.1i fixed it but i see that every page has overflow or margin on the right side again , a white space area for no reason…
Hi,
the margin exists in your footer. it has a margin-left of 100px. you can edit it from the editor or you can add this CSS.
@media only screen and (max-width: 767px){ .guten-GPSwAp > .sticky-wrapper > .guten-column-wrapper { margin-left: 0; } .guten-5Jkozm .text-content-inner { display: flex; justify-content: center; } h1.guten-element.guten-q3mXI6 { font-size: 40px; } }If this is not what you mean, please let me know and post a screen shot of the problem. thank you.
-
This reply was modified 2 years, 1 month ago by
gowinda.
Yes i mean the white space on the right side of the mobile version.
i pasted the additional css code you provide but the margin is still there.
how to fix it?
It appears that the CSS code has become empty for some reason. As a suggestion, there might be a typographical error in your additional CSS. If you don’t mind, could you please send me the complete code from your additional CSS for inspection? Thank you.
/* Styling for image captions */
.wp-block-image figcaption {
color: #fff;
font-size: 11px;
text-align: center;
}/* Body styling to ensure full width and hide horizontal overflow */
body {
width: 100% !important;
overflow-x: hidden !important;
}/* Align left elements within .wp-site-blocks */
.wp-site-blocks > .alignleft {
float: left;
margin-right: 2em;
}/* Specific styling for aligned, resized, and rounded images */
figure.wp-block-image.alignleft.size-full.is-resized.is-style-rounded {
float: none;
}/* Card styling */
.card {
width: 500px !important;
}/* Responsive styling for screens with a max-width of 767px / @media only screen and (max-width: 767px) { / Adjust margin for sticky wrapper inside .guten-GPSwAp */
.guten-GPSwAp > .sticky-wrapper > .guten-column-wrapper {
margin-left: 0;
}Centering text content inside .guten-5Jkozm */
.guten-5Jkozm .text-content-inner {
display: flex;
justify-content: center;
}
/* Adjusting font size for H1 elements inside .guten-q3mXI6 */
h1.guten-element.guten-q3mXI6 {
font-size: 40px;
}}
Anyone could help me?
/* Styling for image captions */ .wp-block-image figcaption { color: #fff; font-size: 11px; text-align: center; } /* Body styling to ensure full width and hide horizontal overflow */ body { width: 100% !important; overflow-x: hidden !important; } /* Align left elements within .wp-site-blocks */ .wp-site-blocks > .alignleft { float: left; margin-right: 2em; } /* Specific styling for aligned, resized, and rounded images */ figure.wp-block-image.alignleft.size-full.is-resized.is-style-rounded { float: none; } /* Card styling */ .card { width: 500px !important; } /* Responsive styling for screens with a max-width of 767px Adjust margin for sticky wrapper inside .guten-GPSwAp */ @media only screen and (max-width: 767px) { .guten-GPSwAp > .sticky-wrapper > .guten-column-wrapper { margin-left: 0; } /* Centering text content inside .guten-5Jkozm */ .guten-5Jkozm .text-content-inner { display: flex; justify-content: center; } /* Adjusting font size for H1 elements inside .guten-q3mXI6 */ h1.guten-element.guten-q3mXI6 { font-size: 40px; } }Hi, try using this instead.
hello
i tried the additional CSS you provided but still doesn’t fix the issue with white area and overflow on the right side on mobile and tablet screens
thx
try to put the css code inside custom html block inside the header part. go to you front page and click edit page. in the editor, find your header part and then add Custom HTML block anywhere you want as long as it in the header part. and the paste the code i gave you on it. just remember to add <style></style>
the code should look like this:
<style> @media only screen and (max-width: 767px){ .guten-GPSwAp > .sticky-wrapper > .guten-column-wrapper { margin-left: 0; } .guten-5Jkozm .text-content-inner { display: flex; justify-content: center; } h1.guten-element.guten-q3mXI6 { font-size: 40px; } } </style> -
This reply was modified 2 years, 1 month ago by
The topic ‘Cannot apply additional css to anything’ is closed to new replies.