Edit Site Title Location & Site

Site URL: http://www.lobuzzettacopy.com

Hello,

So I have custom CSS so I can show the logo and site title simultaneously. But when on mobile it looks strange. Is there some CSS that I can add to move the Site Title only on mobile and maybe even change the size?

CSS:

.header-title-logo a:after {
    content: "Lobuzzetta Copy - Giving Your Copy A Lotta Buzz";
    display: inline-block;
    font-size: 20px;
    font-family: 'proxima-nova';
    color: #000;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    padding-left: 15px;
}
.header-title-logo img {
    vertical-align: middle;
}

1 hour ago, NickLob said:

Site URL: http://www.lobuzzettacopy.com

Hello,

So I have custom CSS so I can show the logo and site title simultaneously. But when on mobile it looks strange. Is there some CSS that I can add to move the Site Title only on mobile and maybe even change the size?

CSS:

.header-title-logo a:after {
    content: "Lobuzzetta Copy - Giving Your Copy A Lotta Buzz";
    display: inline-block;
    font-size: 20px;
    font-family: 'proxima-nova';
    color: #000;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    padding-left: 15px;
}
.header-title-logo img {
    vertical-align: middle;
}

I think hide the title on mobile should work

@media only screen and (min-width: 640px) {
    .header-title-logo a:after {
        content: "Lobuzzetta Copy - Giving Your Copy A Lotta Buzz";
        display: inline-block;
        font-size: 20px;
        font-family: 'proxima-nova';
        color: #000;
        text-align: center;
        vertical-align: middle;
        font-weight: 500;
        padding-left: 15px;
    }
    .header-title-logo img {
        vertical-align: middle;
    }
}

Is there any way to edit it on mobile so I can keep it there?

4 minutes ago, NickLob said:

Is there any way to edit it on mobile so I can keep it there?

Do you want it to be smaller on mobile?

Yes sir. Smaller and maybe move it around to fill in empty space.

Is it your desired result?

Omg yes I love that!

On 10/23/2021 at 8:09 PM, NickLob said:

Omg yes I love that!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo a {
    display: flex;
    align-items: center;
}

.header-title-logo a:after {
    text-align: left;
    font-size: 16px;
}
}

Thank you!!!