Jump to content

Edit Site Title Location & Site

Recommended Posts

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;
}

Link to comment
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;
    }
}

image.png.a763d9c91fdb6d10bf42982191000150.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Is it your desired result?

image.png.70152b39e5f05425ed88ca5864eb5feb.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.