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

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

Home Forums Support Resize Site title when minimizing and remove padding from #primary.content-area

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2288338
    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

    #2288671
    David
    Staff
    Customer Support

    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 ?

    #2288676
    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

    #2288686
    David
    Staff
    Customer Support

    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;
    }
    #2288723
    Oliver

    Works perfectly! Amazing! Thank you very much!

    #2289180
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.