How to add a tagline under logo in Bedford?

Site URL: https://seadragon-pear-6ndb.squarespace.com/

Any suggestions on how to add a tagline under the logo? In the site styles it gives me the option to show one or the other, but I'd like to display both. 

https://seadragon-pear-6ndb.squarespace.com/ password: op1

If it's going to be an issue to add it under the logo, I have an alternate plan. I've added a green bar under the slideshow banner, but I need some advice on how to use CSS so there isn't so much space above/below it AND so the text on that green bar shows as white instead of gray. I tinkered with it for a while, but I'm very much a novice and I'm stumped. I created that bar as a section on the index, and it just has a ton of space around it. 

add to Home > Design > Custom CSS

h1#logoImage a:after {
    content: "Tuan Squarespace";
    display: block;
    color: #fff;
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 1em;
}

Thanks @tuanphan! Appreciate the help!

5 hours ago, allegrocreative said:

Thanks @tuanphan! Appreciate the help!

There has like button (right) or upvote...

Is there a way to use two different fonts in this tagline? Thank you!

20 hours ago, SandraC said:

Is there a way to use two different fonts in this tagline? Thank you!

Add font name to code

h1#logoImage a:after {
    content: "Tuan Squarespace";
    display: block;
    color: #fff;
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 1em;
font-family: monospace;
}

Thank you for your reply, Tuan! I appreciate it. This changes all of the content to the font-family, in this example, to Monospace. I am wondering, is it possible to have Tuan in one font, and Squarespace in another font? Thank you.

15 hours ago, SandraC said:

Thank you for your reply, Tuan! I appreciate it. This changes all of the content to the font-family, in this example, to Monospace. I am wondering, is it possible to have Tuan in one font, and Squarespace in another font? Thank you.

Can you share link to your site? We can check it again easier. 

Hi Tuan. I am not sure how to do that. This is what I have:

Hi @tuanphan, is there something I can do to modify the font in the tagline above? I would like the TEAM & MI to be in a different font than the name.  Thank you.

What is your site url?

@tuanphan, sandracurry.com

19 hours ago, SandraC said:

@tuanphan, sandracurry.com

 

Use this new code

h1#logoImage a {
    position: relative;
}
h1#logoImage a:after {
    content: "DACM Traditional East Asian Medicine & Medical Intuition";
    display: block;
    color: #000;
    font-size: 40px;
    text-align: right;
    line-height: 1em;
    font-family: "Olicana-smooth";
    position: absolute;
    right: -150px;
    margin-top: -30px;
}
h1#logoImage a:before {
    content: "Dr Sandra Curry, ";
    display: block;
    color: #000;
    font-size: 40px;
    text-align: right;
    line-height: 1em;
    position: absolute;
    font-family: monospace;
    right: -100px;
}

How about layout on mobile?

@tuanphan, thank you! This is what I have now. And also what it looks like on mobile. Any tips on how to fix the mobile appearance for the logo/tagline? Also, do you know how the "welcome" font can be a bit larger for the mobile? Thank you so much! I really appreciate your assistance!

On 9/21/2021 at 9:05 AM, SandraC said:

@tuanphan, thank you! This is what I have now. And also what it looks like on mobile. Any tips on how to fix the mobile appearance for the logo/tagline? Also, do you know how the "welcome" font can be a bit larger for the mobile? Thank you so much! I really appreciate your assistance!

Hi,

edit font-size value in above code

How do you want it to look on mobile?

@tuanphan, if I change the font-size of "welcome", it changes the font on computer, iPad, and mobile. I like the way it looks on the computer and iPad, but it shows up much smaller on mobile. is there a way to change it only on mobile.
I would like the Dr SC, TEAM & MI to appear on mobile as it does on the computer, if possible.

On 9/22/2021 at 10:35 PM, SandraC said:

@tuanphan, if I change the font-size of "welcome", it changes the font on computer, iPad, and mobile. I like the way it looks on the computer and iPad, but it shows up much smaller on mobile. is there a way to change it only on mobile.
I would like the Dr SC, TEAM & MI to appear on mobile as it does on the computer, if possible.

Add this CSS to change size on mobile only

@media screen and (max-width:640px) {
h1#logoImage a:before {
    font-size: 15px;
    right: 0;
}
h1#logoImage a:after {
    font-size: 15px;
    right: unset;
    left: 0;
    margin-top: -10px;
    line-height: 1;
}
}

@tuanphan,

thank you for your help. the dr sc, team & mi look great. can you share how I can enlarge the font of "welcome" on the mobile view, too? 

thanks again!

15 hours ago, SandraC said:

@tuanphan,

thank you for your help. the dr sc, team & mi look great. can you share how I can enlarge the font of "welcome" on the mobile view, too? 

thanks again!

Where is Welcome? I see cover page only

https://www.sandracurry.com/

@tuanphan, please see the mobile view snapshot above that I posted on 20 Sept to see "welcome." I would like the font of "welcome" to appear larger like it is on the computer view, please.

Also, I have a second question: is there a way to have "Curry" be a different font than the rest of the line "Dr SC, DACM"? 

Thank you!

On 10/12/2021 at 4:40 AM, SandraC said:

@tuanphan, please see the mobile view snapshot above that I posted on 20 Sept to see "welcome." I would like the font of "welcome" to appear larger like it is on the computer view, please.

Also, I have a second question: is there a way to have "Curry" be a different font than the rest of the line "Dr SC, DACM"? 

Thank you!

Here is your site, no welcome text

Hi @tuanphan, this is the one I was referring to. Is there a way to make the font of "welcome" larger for the phone screen view? The size is fine on the iPad and computer views. Thank you.

On 10/29/2021 at 2:23 AM, SandraC said:

Hi @tuanphan, this is the one I was referring to. Is there a way to make the font of "welcome" larger for the phone screen view? The size is fine on the iPad and computer views. Thank you.

You mean this page?

https://www.sandracurry.com/home

What is access password?