Chris

Thank you, Jarret. It worked! I checked the responsiveness and it seems to carry over.

I originally tried a similar code for .wpcf7 upon inspection.

Thanks, I will open a ticket there.

Hello,

Because you have a featured image it may affect the appearance slightly. I’m still getting familiar with the Twenty Nineteen theme.

Nevertheless you can shorten the padding from the top like this:

@media only screen and (min-width: 768px) {
.site-header {
    margin: 0;
    padding: 10px 0;
}
}

Paste this code into your Customize CSS box (Customize bar on left). The “(min-width: 768px)” means that it will affect devices of 768px (iPad) and larger. For mobile devices smaller than iPad it will show the theme’s default responsive settings.

You can also change the width of smaller devices by adding additional break point code.

-Chris

Hello,

Because you have a featured image it may affect the appearance slightly. I’m still getting familiar with the Twenty Nineteen theme.

Nevertheless you can shorten the padding from the top like this:

@media only screen and (min-width: 768px) {
.site-header {
    margin: 0;
    padding: 10px 0;
}
}

Paste this code into your Customize CSS box (Customize bar on left). The “(min-width: 768px)” means that it will affect devices of 768px (iPad) and larger. For mobile devices smaller than iPad it will show the theme’s default responsive settings.

You can also change the width of smaller devices by adding additional break point code.

-Chris

Thanks, but I’m confused. How should the entire code look exactly? I took the part you gave me and replaced it with the part I thought was incorrect; it broke the site’s design.

Please give me an example of the entire function.

• This reply was modified 6 years, 2 months ago by Chris.

The problem seemed to disappear on its own. I would create a ‘read more’ tag in a separate block between paragraphs, then publish and view page. It would show a gap, but for some reason it doesn’t show up after loading the page from the main site.

Hi @shreen2008,

Try putting this code in your custom CSS bar (at Customize).

@media only screen and (min-width: 768px) {
.site-header {
    margin: 0;
    padding: .8rem 0;
}
}

Let me know if that helps.

-Chris

• This reply was modified 6 years, 2 months ago by Chris.