[Resolved] Resize Site title when minimizing and remove padding from #primary.content-area

[Oliver]

hi guys
So I made the site title huge and it looks great. Problem is, on tablet/mobile view it looks off… is there a way to resize it when being minimized?

On the start page I created, using generateblocks / query loop, the containers are full width but the top (right under the navigation menu) and bottom padding make it look off because of their color not matching the colors of the first and last container (showing query loops) on the page. How can I remove this padding only on the start page?

Here is a link the huge header and the undesired top/bottom padding

[David]

Hi there,

so the Site Title, how about this CSS:

.site-branding .main-title,
.navigation-branding .main-title {
    font-size: clamp( 20px, 25vw, 250px);
}

that will set the font-size: 25vw; so it scales with the viewport but with clamp we set a min ( 20px ) and max ( 250px )

Is the issue the padding between the nav and the first image ?

[Oliver]

Is the issue the padding between the nav and the first image ?

yes it is, as well as at the bottom before the site footer. This however is only an issue in the Start/landing page, because of the different container background colors at the top and bottom. Inside articles, they top / bottom padding are needed

.site-branding .main-title,
.navigation-branding .main-title {
font-size: clamp( 20px, 25vw, 250px);
}

makes the site title smaller on smaller screens but not as small as it would need to be to look good. When minimized comepletely, it still takes the header, half the top bar and half of the navigation menu bar

[David]

you can split the CSS, as you have the site-branding on desktop and the navigation-branding on mobile:.
For desktop:

.site-branding .main-title {
    font-size: clamp( 20px, 25vw, 250px);
}

for mobile:

.navigation-branding .main-title {
    font-size: clamp( 20px, 15vw, 150px);
}

Adjust the values to suit.

Remove the padding from the home page:

.home #page .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

[Oliver]

Works perfectly! Amazing! Thank you very much!

[David]

Glad to hear that

[Author]

Posts