WordPress.org

Support

Support » Themes and Templates » Suits » Responsive header not working

Responsive header not working

  • Hi guys,
    I am running the suits theme on my blog http://www.oliviaontheriviera.com/
    My header image used to be responsive to mobile devices, ipads etc when the site was hosted on wordpress.com but ever since I moved to wordpress.org it no longer is, plus there are white bits on the side.
    Can somebody please explain how to fix the responsiveness and white bits issue and WHERE I should do it exactly? I have created a child them and a style.css file but its not clear for me where one needs to make changes to code once the child theme is created. I’m a beginner!!
    Thank you so much.

Viewing 15 replies - 1 through 15 (of 56 total)
  • Hello Olivia,
    Took me a second to track down that problem, but I think this will help you. It looks like you are using a static image as your background header so I can offer you two things to try.
    First you can try removing the background image in the header and changing the header to a font instead. If you don’t like the fonts I suggest you look at google fonts https://www.google.com/fonts You can install a new font on your site very quickly. This is probably the easiest choice, and is better for SEO.

    The other option would be to use media queries to have the header background change size based on the browser window. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries The rest of the image on your page use these queries so I would bet a style sheet didn’t make the transfer from .com to .org. In your case you would add the media queries to your child theme style.css file.

    I’m Sorry, I wish I could be more specific but I just don’t have a good way to test these ideas from the outside looking in. Best of luck

    Dear Michael.
    Thanks for your reply.
    Yes I am using an image as my header that worked just fine when I was on wordpress.com.
    So if I understand correctly:
    option 1: I change to font and I have to buy a web license of my font.
    option 2: I get into the style.css file and this is where I get lost and don’t understand anything 🙂 I’m going to read up on the link you sent me and hope I understand what to do. My question is if I have to change the stylesheet code where do I do this? Do I make a new stylesheet on based on the old one and upload into the child theme folder?
    Thanks

    For Option 1 You don’t need to buy anything if you use a Google font. They are distributed at no cost. You just need to pick one an follow the instructions on the site.

    For Option 2 Add all new CSS to the bottom of the child theme styles.css.

    Hi Michael,
    My font (Futura light) is not available for free on google fonts.
    For option 2: this is what the code of my child theme style.css currently looks like:
    `/*
    Theme Name: Suits Child
    Theme URI: http://www.themeweaver.net/demo/suits-child/
    Description: Suits Child Theme
    Author: Theme Weaver
    Author URI: http://www.themeweaver.net/
    Template: suits
    Version: 1.0.0
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: suits
    */

    @import url(“../suits/style.css”);

    /* =Theme customization starts here
    ————————————————————– */
    Do I just add any changes after this line and it will keep importing the rest from the original style.css or do I need to copy the entire content of the stylesheet from the main theme?
    Thnaks,
    Olivia

    Oswald light is close to Futura light. There won’t be an exact match http://www.google.com/fonts/specimen/Oswald

    As for the CSS just put the bits you need in the child theme css.

    Browsers read the CSS sheets from the top down so, if you add a duplicate rule to a css sheet the browser will use the rule that is written last, barring some kind of specificity conflict which I’m not going to get into unless I need to.

    The @import url(“../suits/style.css”); tells the child theme to import and use all of the css from your parent theme. Then it will start looking at and applying the CSS from your child theme using the rule that it reads last. Just add all the new stuff below the
    /* =Theme customization starts here ————————————————————– */
    text and you should be fine.

    DO NOT try to update the parent CSS unless you:
    A. have a copy of it BEFORE YOU START and
    B. Are confident you know what you’re doing.
    (I learned that last bit the hard way)

    Thanks Michael will give option 2 a go and let you know how it goes 🙂

    found the media queries in my main theme stylesheet , it has values in there for mobile devices,should i change these in the child theme style css?

    [ Many lines of CSS moderated. please either post a link to the CSS directly or use pastebin.com and post that link her instead. ]

    You would add the new css to the child theme if that was going to work… however after looking at the css code you posted (I was in the notification email i got, before it was moderated) I dont think adding the media queries will work.

    It appears this theme is a bit of a mess…

    I was able to download the “Suites” theme you are using, and uploaded a header image on a sandbox site i have. No matter how you upload the image to the theme it will not be responsive because the theme treats all header images as background images and just clips off the ends as the screen gets smaller.

    I found a way around the problem but it requires adding a div to the header.php file and adding some lines of code to the CSS. ALL of the changes need to be done in the child theme to protect you if you update your theme in the future.
    First collect the following code in a notepad or some other text editor.

    <div id="headImage">
    <img src="http://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg" alt="SandboxHeader.jpg" width="960" height="180" class="alignnone size-full wp-image-26" />
    </div>
    #headImage {
        display: block;
        float: none;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    First you need to replace the “http://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg” alt=”SandboxHeader.jpg” image source with the image source of your header image. You can find that in your media library.

    After creating a copy of header.php in your child theme open that file in your editor.

    Below the line <header id=”masthead” class=”site-header” role=”banner”> insert the new div div noted above.

    Then add the new CSS rule to your child theme CSS sheet.

    Sorry its not a short answer or an easy fix. Perhaps someone knows a better answer, but I have tested this at http://sandbox.michaelsmithportfolio.com/ and I know it works.

    Hi Michael,
    Just did the following:
    1. copied the div above with my source image into a child header.php file below the line <header id=”masthead” class=”site-header” role=”banner”>
    2. copied the div into the child style.css
    Don’t see any difference on my website…
    🙁

    It doesnt look like the html code in the header.php file was updated correctly. See the snipit below. The code from my site has the added div, but the code from your site does not.

    <!-- from Olivia -->
    <header id="masthead" class="site-header" role="banner">
    			<a class="home-link" href="http://www.oliviaontheriviera.com/" title="OLIVIA ON THE RIVIERA" rel="home">
    				<h1 class="site-title">OLIVIA ON THE RIVIERA</h1>
    				<h2 class="site-description">Fashion and Lifestyle blog live from the French Riviera</h2>
    			</a>
    
    <!-- From sandbox -->
    <header id="masthead" class="site-header" role="banner">
    <div id="headImage">
    <img src="http://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg" alt="SandboxHeader.jpg" width="960" height="180" class="alignnone size-full wp-image-26">
    </div>
    			<a class="home-link" href="http://sandbox.michaelsmithportfolio.com/" title="Sandbox" rel="home">
    				<h1 class="site-title">Sandbox</h1>
    				<h2 class="site-description">Its my playground</h2>
    			</a>

    I would double check to make sure your child theme is working correctly. You may already have this but here is the link from wordpress.org on how to create a child theme. http://codex.wordpress.org/Child_Themes

    Hi Michael I’ve just check my child theme header.php again and the div code is definitely in there below the line <header id=”masthead” class=”site-header” role=”banner”>

    With regards to the child theme, it is active on my site dashboard and I did follow the steps in the “how to create a child theme” section so am a bit lost really…

    FYI I just changed my header image to one that is 180×1200 pixels as I rechecked in my theme and it now says that this is the suggested size. So it looks better now on a pc (less white bits on the side) however still not responsive on mobile devices

    That leads me to believe the header.php file in your child theme is not overwriting the header.php file in your parent theme. (see link) The link is a screen capture of Sanbox compared to Olivia with the live code showing in the Chrome inspector. The new Div is still not showing on your site (your site is on the right)

    I would check the following things
    a) the name of the header.php on both the parent and child are exactly the same.
    b) the parent theme is the active theme in WordPress
    c) the changes you make to the child css are working on the site (you have been making changes in the child them already so i doubt this is a problem)

    Unfortunatly, I am just guessing at the problem now. I don’t know of any other way to check for the problems without logging in.

    https://www.dropbox.com/s/ewzb65y9dft6w79/sandbox%20vs%20olivia.jpg

    Oh and stole your header image and applied to sandbox just to double check things. This solution still works, but it looks like you have a white line in the image you will want to clean up after you get the header fixed.

    Hi Michael,
    1.the active theme in my wordpress interface is the child theme not the parent theme, should i put the parent theme as the active theme?
    2. the header.php file names were not the same, just changed that now

    could this be causing the issue?

Viewing 15 replies - 1 through 15 (of 56 total)
  • The topic ‘Responsive header not working’ is closed to new replies.
Skip to toolbar