Changing header logo width

[kristincali]

I have a few questions.

First, when viewing my site kristinbytheocean.com you see my logo and site name on the left, with my tagline underneath it “Simple Fashion – Natural Beauty – Coastal Living”. How can I change the width of that section because when viewing on a PC, the last word ‘Living’ gets sent to another line. I want the whole tagline to fit in ONE line.

Second question. When you click to view a blog entry, the date and title appear on my header image. Also when viewing the categories or archives the page title shows on my header image. I would like to change the text font, size, and color of those but I can’t find that CSS.

Last question. I’ve changed the font sizes of headers h1 – h6 but my post titles and the sidebar titles stay small and don’t adjust. Any ideas why?

Thank you SO much in advance for any help.

[Andy]

To change the width of the logo section, add this code to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’:

@media only screen and (min-width: 769px) {
    #masthead > .container {
        grid-template-columns: minmax(auto,300px) auto;
    }
}

The key value here is 300px so change that to a different value, say 400px for example, and the logo section will max to that width.

[kristincali]

Thank you very much Andy!

[kristincali]

I still have another question…

When you click to view a blog entry, the date and title appear on my header image. And when viewing the categories or archives, the title shows on my header image.

I would like to change the font, size, and color of the titles on my header image but I can’t find that CSS.

[Andy]

Please ask one question per topic, as it helps other users to find answers to the same or similar questions.

So, for example this question has the title “Changing header logo width”. You wouldn’t look at this question to find an answer about changing the font of the page title.

Thank you.

[Author]

Posts