[Support request] Site Title, Tag Line + Mobile Header Layout

[William]

Hello,
Can you shed any light on how I can recreate this Logo + Tag Line layout on GeneratePress on Mobile so that the logos remain side by side and then wrap underneath on smaller screen sizes.

I’m currently using this CSS, found on another closed support article to make the logo and tag line appear side by side:

.site-branding > * {
display: inline-block;
}

.site-logo {
margin-right: 10px;
}

.main-title {
padding-right: 1px;
margin-right: 1px;
}

[David]

Hi there,

so that site is pure HTML and its using HTML text for that.
Can i see the site you’re working on? Then i can advise on the best way to do that.

[William]

Thankyou for taking a look.

This is the website that we’re working on: https://andrew-wallace-architects.onyx-sites.io/

[David]

Ok, so we need to split the site-description into two HTML elements, to do that requires some PHP.
Add this PHP Snippet to your site:

add_filter( 'generate_site_description_output', function(){
    return sprintf(
        '<p class="site-description"%1$s>
            line one of description
        </p>
        <p class="site-description"%1$s>
            line two of description
        </p>
        ',
        'microdata' === generate_get_schema_type() ? ' itemprop="description"' : ''
    )
});

change the two lines to your requirements.

Then add this CSS:

/* inline title and 2 descriptions */
.site-branding {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
}
/* Optional Add some space after title */
.main-title {
    margin-right: 10px;
}
/* Make it wrap on mobile */
@media(max-width: 768px) {
    .site-branding {
        max-width: 300px;
    }
}

Note the last CSS rule, you can adjust the @media(max-width: 768px) to a screen size when you want the description to wrap, and you will need to adjust the max-width: 300px; to force it to wrap.

[Author]

Posts