Responsive headers and CSS editing

Let’s envisage this a bit, when your header image gets smaller it’ll reduce in height (assuming you want the image to respond in equal proportion) – meaning there’ll be white space underneath your header image. Are you okay with this white space? The smaller the image the larger the space.

Ah. Good point. Thanks Andrew. No, I wouldn’t be OK with all that white space.

I suppose therefore it would be simplest to redo my header in such a way that its layout fits all the screen sizes I can think of.

Do I have any other obvious options? For instance, is it possible for the image to respond not in equal proportion?

Is the issue just that you don’t want your site title resizing?

The issue is that my banner as it stands cuts off text (which is incorporated in into the image) when a desktop browser is narrowed, or if the page is viewed in a portrait iPad or on an iPhone. I hope that makes sense.

One workaround could be for me to just move the text to within the area that the smallest width covers, though again if there are other things I could do I’d be grateful to hear.

You do have your site title “https://www.simonvarwell.co.uk/” in the code already, but it’s hidden with CSS. You could unhide it in CSS and then use that instead of embedding that title within your image.

Sorry Andrew, I don’t know what hiding/unhiding in CSS means, or what difference that would make. And I refer you to the second part of my original query, where I reported that I was unable to open or edit CSS files.

Does your theme come with a “Custom CSS” or similarly named part of the dashboard? This won’t address your underlying issue that you raised in the second part of your original query, but you shouldn’t be using that section unless you’ve a Child Theme set up (which you don’t unless it’s just not activated).

I’m not sure. I’m afraid. I have “Edit CSS” and “Editor” under the Appearance heading in the dashboard, if that’s a help. And no, I don’t have a Child Theme set up.

I have “Edit CSS”

That’s it.

Can you access that bit fine?

Yes, thanks, I can. Don’t know what to do with it, but I can access it!

Use that “Edit CSS” option to hold this code:

body .site-title {
 position: static !important;
 font-weight: bold;
 font-size: 3.1em;
 margin-top: 1em;
}

.site-title a {
 color: black;
}

Done. Aha, thanks Andrew, I see what that does.

One slight quibble, though, in that the text is longer than the shortest page width (iPhone, portrait) and so rather clumsily stretches off the page.

So is it just a case of experimentally reducing the font size a bit, until it fits?

Try setting your font size with a percentage value, e.g:

font-size: 200%;

That should resize it in relation to the screen size

It doesn’t resize it in relation to the screen (the text is the same size whatever), but it does fit into the smallest resolution (albeit to the right, partly hanging off the edge of the screen.

Do I need to tell it something in terms of margins or alignment?

You can use “media queries” to target different screen widths, e.g:

/* Mobile by default*/
body .site-title {
 font-size: 200%;
}

/* Desktop by media query */
@media screen and (min-width: 800px) {
 body .site-title {
  font-size: 3.1em;
 }
}