WordPress.org

Ready to get started?Download WordPress

Forums

Suits
Responsive header not working (57 posts)

  1. oliviaontheriviera
    Member
    Posted 2 months ago #

    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.

  2. Michael Smith
    Member
    Posted 2 months ago #

    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

  3. oliviaontheriviera
    Member
    Posted 2 months ago #

    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

  4. Michael Smith
    Member
    Posted 2 months ago #

    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.

  5. oliviaontheriviera
    Member
    Posted 2 months ago #

    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

  6. Michael Smith
    Member
    Posted 2 months ago #

    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)

  7. oliviaontheriviera
    Member
    Posted 2 months ago #

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

  8. oliviaontheriviera
    Member
    Posted 2 months ago #

    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. ]

  9. Michael Smith
    Member
    Posted 2 months ago #

    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.

  10. oliviaontheriviera
    Member
    Posted 2 months ago #

    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...
    :(

  11. Michael Smith
    Member
    Posted 2 months ago #

    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

  12. oliviaontheriviera
    Member
    Posted 2 months ago #

    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...

  13. oliviaontheriviera
    Member
    Posted 2 months ago #

    FYI I just changed my header image to one that is 180x1200 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

  14. Michael Smith
    Member
    Posted 2 months ago #

    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

  15. Michael Smith
    Member
    Posted 2 months ago #

    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.

  16. oliviaontheriviera
    Member
    Posted 2 months ago #

    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?

  17. oliviaontheriviera
    Member
    Posted 2 months ago #

    now that ive renamed and uploaded the header.php file the layout is completely off now!

  18. oliviaontheriviera
    Member
    Posted 2 months ago #

    updating the header.hp file and style.css in the child theme with the new image and renaming the header so it was the same as the parent theme file completely messed up the layout. I've now removed both these files and activated the parent theme so the site looks normal...
    :(

  19. Michael Smith
    Member
    Posted 2 months ago #

    Your active theme should be your child theme, but before you start trying to reactive your child I would copy the header.php file from your parent and paste it into your child. Then when you reactivate the child check to make sure the site still looks the same as it did with an active partent.

    If everything still looks the same make sure this css code is in the custom css file you are using.

    #headImage {
        display: block;
        float: none;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    At this point refreshing your site will not show any changes at all. that is expected.

    next place the following code in the child theme header.php file just below the <header id="masthead" class="site-header" role="banner"> line (see the example above if you need clarification.) Dont't forget to trade out the image in the following code for your header image instead of mine.

    <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>

    If you did everything correctly the header of your site will look like the header at http://sandbox.michaelsmithportfolio.com/

  20. oliviaontheriviera
    Member
    Posted 2 months ago #

    Hi Michael,
    going to try the steps above. When you say
    "If everything still looks the same make sure this css code is in the custom css file you are using.
    #headImage {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    }"
    Do you mean I should check if this code is in the style.css file in my child theme? If that is the case it is not. Should I add it at the end after theme customization?

  21. oliviaontheriviera
    Member
    Posted 2 months ago #

    Ive followed the steps above I must be doing something wrong?? It still looks off: the header image appears but there are still white bits on the sides and a big white blank below.
    this is the code i copied in the header.php in the final step:

    <div id="headImage">
    <img src="http://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180x1200.jpg" alt="oliviaontheriviera-header-180x1200.jpg" width="1200" height="180" class="alignnone size-full wp-image-26" />
    </div>

    Ive also noticed there is a custom header php file in the parent theme. could this be causing issues?

  22. rosamundwo
    Member
    Posted 2 months ago #

    wait a min, i check ur css,
    .site-header {
    background: url("http://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180x1200.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
    }

    looks strange..looks like it's fixed

  23. rosamundwo
    Member
    Posted 2 months ago #

    correct me if i'm wrong, this is static method of placing header rite?
    Not the wordpress way

    .site-header {
    background: url("http://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180x1200.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
    }

  24. oliviaontheriviera
    Member
    Posted 2 months ago #

    Sorry not sure what you mean?
    Right now I have the parent theme active as I can't get the header right on the child theme. I originally uploaded a header image in the wordpress interface=>appearance=>header.
    The problem is that the heade rimage does not adapt to mobile layout and on a pc browser I also have white bits on either side (like if it were too short)...

  25. Michael Smith
    Member
    Posted 2 months ago #

    the css code should be placed into style.css in your child theme. Without that code in place the header will not be responsive.

    I still don't see the new div in the php file

    Lets try getting the php in place in a different way.
    • Download the header.php file from the link below.
    • Open in in a text editor like notepad.
    • Copy the whole thing from beginning to end.
    • Then replace everything in your child header.php file the code from the linked header.php file.

    https://www.dropbox.com/s/19309umi85kv39j/header.php

    Also, Are your removing the old header image by going to Appearance > Customize > Header Image and clicking remove image? This won't work if you have the old header image in place.

    @rosamundwo - the problem we are having is that the theme Olivia is using sets the header image as a background image that will not scale down responsively. I could't find a way to fix that via css alone so I'm having her add an html element into her header.php file that will react appropriately. The css Code you posted doesn't' address the responsive problem we are trying to solve. You can see the result I'm trying get on Olivia's site here: http://sandbox.michaelsmithportfolio.com/

    If know of a simpler way to achieve this effect i would love to know how.

  26. Michael Smith
    Member
    Posted 2 months ago #

    Oh and Olivia if your parent theme is active that would explain why i don't see the new div in the header.php file. You may have the php modified correctly but if im going to trouble shoot you need to leave the child theme active.

  27. oliviaontheriviera
    Member
    Posted 2 months ago #

    Michael i am putting the child theme "back on" so you can take a look and will follow the steps in your latest post and update you.

  28. Michael Smith
    Member
    Posted 2 months ago #

    I thinks its set up right. Turn off the header image in the theme.

    and don't add rosamundwo's code snipit i

  29. oliviaontheriviera
    Member
    Posted 2 months ago #

    Just did the following steps:
    Downloaded and copied the file in wordpad and named it header.php. Uploaded it to child theme. Inserted the `#headImage {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    }`
    in the style.css sheet in my child theme.
    Everything is uploaded but it now looks like there are 2 images. I went to appearance=>customize and there is no header image set...

  30. Michael Smith
    Member
    Posted 2 months ago #

    OK lets check a few things under appearance >? customize

    site title and tag line - the display header text box should be unchecked
    header image should be no image
    background image should be no image

    I do see the replacement header in place, and it is responsive. so at least that seems to be working

Reply »

You must log in to post.

About this Theme

About this Topic