Etienne ROSENSTIEHL

Thanks for this review

Hi Oliver,

Thank you for this first response.

As you say, it’s a bit too hacky. I understand that in both cases we have to copy any change in the style.css either in your code (your solution) or at the end of the style-editor.css file (my suggested solution).
I am quite sure something simpler could be feasible.

Regards
Etienne

By the way, this bug was already reported in the Gutenberg Support.

Hi @macmanx ,
I’ll live without it.
Sorry for the burden and thanks again.

I have the same kind of issue with themes 2020 and 2021. Widgets can’t be saved.

@mukesh27 @macmanx ,
Thank you for your time and efforts.
Apparently, this is not a 2021 issue, I have the same problem with 2020. I believe it is a compatibility issue with Gutenberg as everything works without the Gutenberg plugin.
Therefore I consider this point as resolved

Regards
Etienne R

Hi @macmanx ,

Thank you for your immediate reaction.

I use WP 5.6 and 2021 version 1.1.
I now have Akismet, Hello Dolly, Healthcheck and Gutenberg as plugins.
Healthcheck tells me the imagick PHP component is not active, this is the only minor performance point it mentions (except unactivated plugins NexGen and NexGenPlus).

I used the Twentytwentyone theme (without child theme). I added a paragraph in the widget area saying ‘Hello World’ and when saving there is a message on the bottom left side saying : there was an error [object Object] and the saving process doesn’t complete, I have to leave the page unsaved. Same thing on Twentytwenty without child-theme.

Thanks for your help.
Etienne R

Hi @gunivortus ,

May be worth trying this kind of additional CSS :

:root {
    --primary-nav--font-size: var(--global--font-size-lg);
    --primary-nav--font-weight: var(--heading--font-weight-strong);
}

@media only screen and (min-width: 482px) {
	.primary-navigation {
		position: relative;
		margin: auto;
	}
}

Good luck
Etienne R

Many thanks @domainsupport ,
It works great.

Dear @gunivortus ,
Have a look at the style.css, you will find variables defined and many of them are related to the size of the characters.
In the Additional CSS of the theme customizer, you can change the values quite easily as follows :

:root {
     	--global--font-size-base: 1rem; /* instead of : 1.25rem; */
	--global--font-size-xs: 0.75rem; /* instead of : 1rem; */
	--global--font-size-sm: 1rem;	/* instead of : 1.125rem; */
	--global--font-size-md: 1rem;	/* instead of : 1.25rem; */
	--global--font-size-lg: 1.25rem; /* instead of : 1.5rem; */
	--global--font-size-xl: 1.5rem; /* instead of : 2.25rem; */
	--global--font-size-xxl: 2rem;	/* instead of : 4rem; */
	--global--font-size-xxxl: 3rem;	/* instead of : 5rem; */
	--global--font-size-page-title: var(--global--font-size-xxl);
}

You’re welcome

Dear @charliehanger,
Your code looks good, it is exactlty what I would have done. It works fine both with a child theme and with the native Twenty twenty One.
Do you have the same problem on a mobile screen ? Did you look at the
--primary-nav--font-size-mobile:
May you could tell us the URL of the website you work on.

Best
Etienne R

Hi charliehanger,

I tried the following in the additional CSS and it works.

:root {
–primary-nav–font-size: 30px;
}

Do you have the exact spelling. In your message, you have one dash instead of two in your variable names.

Hope this helps
Etienne R

Regarding the size of the menu items :

.primary-menu li {
font-size: 24px; /* instead of inherit */
line-height: 1.25;
position: relative;
}

I am not sure I can help. Regarding the background-color of the menu you can try this code in your child theme :

#site-header {
background: #94c83d; !important;
position: relative;
}