Cannot apply additional css to anything

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 6 months, 2 weeks 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.1

i 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 6 months, 2 weeks 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>