Title: Responsive headers and CSS editing Last modified: August 21, 2016 --- # Responsive headers and CSS editing * Resolved [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/) * Hi there. * I’m trying to make the header on my website responsive to different sizes, resolutions, mobile etc. Website: //www.simonvarwell.co.uk Theme: Expound * As much as I can figure out (and I am very much a dunce at all this malarky, so tell me if I’m wrong), I need to edit the theme. * However, when I go into Appearance > Editor, I cannot open any of the files on the right, nor even simply click “Update File” on style.css – all actions lead to a page saying the page cannot be found. * Does that mean there’s something wrong with my set-up of the Theme, or my website generally? * Any pointers would be very gratefully received. Thanks in advance. Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/responsive-headers-and-css-editing/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-headers-and-css-editing/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466791) * 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. * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466792) * 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? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466796) * Is the issue just that you don’t want your site title resizing? * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466797) * 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. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466798) * You do have your site title “[http://www.simonvarwell.co.uk/”](http://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. * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466801) * 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. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466803) * 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). * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466804) * 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. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466807) * > I have “Edit CSS” * [That’s it](http://jetpack.me/support/custom-css/). * Can you access that bit fine? * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466808) * Yes, thanks, I can. Don’t know what to do with it, but I can access it! * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466810) * 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; } ``` * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466815) * 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? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466818) * Try setting your font size with a percentage value, e.g: * ``` font-size: 200%; ``` * That should resize it in relation to the screen size * Thread Starter [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * (@simonvarwell) * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466821) * 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? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/#post-4466822) * 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; } } ``` Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/responsive-headers-and-css-editing/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-headers-and-css-editing/page/2/?output_format=md) The topic ‘Responsive headers and CSS editing’ is closed to new replies. ## Tags * [editor](https://wordpress.org/support/topic-tag/editor/) * [header](https://wordpress.org/support/topic-tag/header/) * [php](https://wordpress.org/support/topic-tag/php/) * 20 replies * 2 participants * Last reply from: [Simon Varwell](https://wordpress.org/support/users/simonvarwell/) * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/responsive-headers-and-css-editing/page/2/#post-4466834) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics