[Resolved] Cover Block Font Size

[John]

Hello,
I’m trying to properly set all of my cover blocks (Graphic with Text overlay) to responsively change the font size when on mobile.
I’ve tried many things but nothing has worked to change the font size for the cover blocks.

This is the CSS I added:
/* Set a font size of 30 pixels for desktop screens */
.cover-text {
font-size: 30px;
}

/* Set a font size of 14 pixels for mobile screens */

@media (max-width: 768px) {
body {
font-size: 14px;
}
}

What am I missing?
How do I keep the property of bold as well on mobile?
Site link in the private details.
THANK YOU!

[Fernando]

Hi John,

I’m not seeing any text with a class of cover-text on the link you provided.

The Cover seems to be just an image as well with no text.

Can you check?

[John]

Thanks Fernando,
That is strange. Let me clarify to make sure we are talking about the same things.
I am very new to this so my apologies.

The goal is to create a picture with text on top of the picture.
This text and photo should change size based on if it is being viewed on a desktop or a mobile device.
If you’re looking at the home page on the link I sent, you can see several quotes and some descriptions.
These were made by clicking the plus sign from in the page editor, selecting cover, selecting an image, adding text and then modifying the text size. Is this not the right way to make such a thing?

On the about page, you can see a very simple example of an image with a picasso quote on top of it. Do you see the text? This is an example of the text and image I would like to be responsive.

If there is a better way to create what you see on the about page (as an example), please let me know what to do.
Thank you!

[David]

Hi there,

the core blocks use a lot of inline or utility class styles.
For example your cover blocks text has the L font size selected, so it gets given the has-large-font-size utility class.

Which returns this CSS:

.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

So, whats happening her is:

1. the text within the cover is given the has-large-font-size class
2. it sets the font using a CSS Variable ( custom property ) called --wp-preset-font-size-large
3. WP loads this variable in the root of the HTML document and it has a default value of 36px.

So we can change the variables value with CSS. Like so:

@media(max-width: 768px) {
   .wp-block-cover {
     --wp--preset--font-size--large: 20px;
   } 
}

What this will do is change the variable only within the wp-block-cover so if the L font size is used elsewhere it won’t be affected.

[John]

Thank you for the reply.

I have entered that CSS in the additional CSS field by going to the Dashboard > Appearance > Customize > Additional CSS.
This does not create any change in the website on desktop or mobile.

Am I entering the CSS in the right place?
What else do I need to know to have this solution work on all of the pages?

The style.css page (Found by going to Dashboard > Appearance > Theme File Editor) makes it clear that I shouldn’t be making any edits there, so I did not.

Thank you!

[Ying]

I have entered that CSS in the additional CSS field by going to the Dashboard > Appearance > Customize > Additional CSS.
This does not create any change in the website on desktop or mobile.

If it doesn’t change anything, it’s likely you have syntax error in the existing CSS, can you try adding the CSS to the top of the additional CSS field to test?

[John]

Thank you, I found the problem.

The problem was that my typography for the blocks was not using the LARGE size preset, it was using a custom size.
After changing this to the LARGE size preset option, it worked.

Do you know any reason why Padding does not show up as an option for a cover block? All of the wordpress documentation shows padding as being an option and the only thing I see under the cover block advanced settings > Dimensions > is Minimum height of cover. Padding as an option, simply isn’t there. I’m using the default GeneratePress install, fully updated, no template installed, all Modules turned on.

Thank you!

[John]

Never mind, I figured it out.

Solution:
Click on the Cover block to select it.
Click on the “Advanced” tab in the right sidebar.
Scroll down to the “Additional CSS Class” field and enter a custom class name, “my-cover-block” (without the quotes).
Click on the “Update” button to save the changes.

In the Appearance > Customize> Additional CSS add:

@media only screen and (min-width: 768px) {
.my-cover-block .wp-block-cover__inner-container {
padding-left: 100px;
padding-right: 100px;
}
}

This adds padding on desktop and ignores the instructions on mobile.

Thanks

[Ying]

Glad you’ve figured it out 🙂

[Author]

Posts