Jump to content

Need a tagline in the header that is automatically centered but doesn't show up on mobile site

Go to solution Solved by sorca_marian,

Recommended Posts

  • Replies 5
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Website address?

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment
  • Solution
Posted (edited)

Add the below code in Custom CSS, at the bottom, below all existing code

.header-title {
    flex-grow: 20;
}

.header-title-logo {
    display : flex;
    align-items : center;
}

.header-title-logo a {
    flex-basis : 227px;
    flex-shrink: 0;
}

.header-title-logo::after {
    width: 100%;
    padding : 0!important;
    text-align : center;
}

@media (max-width: 767px) {
    .header-title-logo::after {
        display: none;
    }
}

 

Screenshot 2024-03-10 at 03.15.27.png

Screenshot 2024-03-10 at 03.15.35.png

Edited by sorca_marian

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment
4 minutes ago, sorca_marian said:

Add the below code in Custom CSS, at the bottom, below all existing code

.header-title {
    flex-grow: 20;
}

.header-title-logo {
    display : flex;
    align-items : center;
}

.header-title-logo a {
    flex-basis : 227px;
    flex-shrink: 0;
}

.header-title-logo::after {
    width: 100%;
    padding : 0!important;
    text-align : center;
}

@media (max-width: 767px) {
    .header-title-logo::after {
        display: none;
    }
}

 

Screenshot 2024-03-10 at 03.15.27.png

Screenshot 2024-03-10 at 03.15.35.png

THANK YOU!

Link to comment

😀

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

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.