move logo location

Hi mobilequeen

It might be better if you have the logo on the site so that people can see what the issue is and advice you further.

Thanks

Hi Salsaturation!
You are correct! Sorry, I forgot to leave the logo on there. Now it’s there. Where do you think it would look best, and is it doable? He didn’t have a file with the logo, but it was on the front of the T-shirts he sells, so I just took a picture of it. (He gave me a T-shirt, too)
Thanks,
Kathy

https://www.seabreezecafedepoebay.com

• This reply was modified 8 years, 1 month ago by mobilequeen.

If you don’t already have a Child_Themes or a custom.css you should install a plugin like Jetpack then add the following to the custom css area… adjust the height and sizes accordingly

.site-logo-link {
    float: left;
    margin-right: 5px;
}

Thank you for your help. It worked, but now I think maybe I should either make the logo smaller or take the “Subs” out of the title and just make it Sea Breeze Bakery & Cafe so it will fit on one line.

Please check it again an tell me what you suggest.

Thanks again,
Kathy ??

https://www.seabreezecafedepoebay.com

you can add the following code t make the logo smaller… amend the 80px appropriately

max-width: 80px;

Thanks! It made the logo smaller, however the “Subs” is still on a lower line.
I really appreciate your help. Any more suggestions?
Thanks again,
Kathy ??

https://www.seabreezecafedepoebay.com

It looks like the width of the branding area is causing it to move onto a second line. Try adding this to your CSS:

@media screen and (max-width: 1024px) {
    .site-branding {
        display: block;
    }
}

??

Hi Chad, I tried adding that, but then it said something was unbalanced and I need an opening and closing for each ?

Anyway, this is what i have in the CSS box now. Would you be so kind to add the code so I get it right?

.site-logo-link {
float: left;
margin-right: 5px;max-width: 80px;
}

Thanks a lot!
Kathy ??

Hm. Did you maybe miss the last } when you copied? I know I’ve done that more than once ??

Here’s your code combined with mine:

.site-logo-link {
    float: left;
    margin-right: 5px;
    max-width: 80px;
}

@media screen and (max-width: 1024px) {
    .site-branding {
        display: block;
    }
}

Let me know if that gives you better results!

Yay! Thanks so much! That worked! (maybe I did leave out one of those { things, but i thought I copied and pasted it right.) I know CSS can be very touchy. ??

https://www.seabreezecafedepoebay.com

I appreciate salsaturation’s and your help very much.

Have an amazing weekend!

Kathy ??

• This reply was modified 8 years, 1 month ago by mobilequeen.

Hey guys,
I just noticed that the logo doesn’t look right on my mobile phone. It’s probably just because of the phone, I guess. If you get a chance will someone look at the header of my site on their phone and tell me what you think? It’s not that big of a deal, but I thought I’d mention it.
Thanks and have a great Saturday!
Kathy

https://www.seabreezecafedepoebay.com

try something like

@media screen and (max-width: 500px) {
.site-branding {
width: 100%;
}

.site-title {
font-size: 24px;
font-size: 2.4rem;
}
}

Thanks, salsaturation! That did the trick! Have a great day!
Kathy ??

• This reply was modified 8 years, 1 month ago by mobilequeen.

great – don’t forget to mark it as resolved