Responsive header background-color 2021

  • Resolved carldavidcarlstrom

    (@carldavidcarlstrom)


    3 years, 2 months ago

    Hello,

    the header background-color (darkgreen) turn white when I view the page on a mobile.

    Do you know why this could be?

    The extra CSS for the header is: 

    @media only screen and (min-width: 482px){ 
body header#masthead {
    max-width: 100% !important;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #006400 !important;
    padding-bottom: 0%;
    padding-top: 0%;
    }
	}

    Thank you

    /David

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Joy

    (@joyously)

    3 years, 2 months ago

    You should ask in the theme’s support forum.

    George Appiah

    (@gappiah)

    3 years, 2 months ago

    What Joy is saying is spot on: you should always ask theme-related questions in the theme’s own support forum. That’s the best way to get help from the theme’s author and user community. It also helps the authors know what problem may be in their product so they can fix it for all users. Ditto for plugins.

    As this is just a cosmetic change and I have a little time on my hands now, let’s see if I can pull this one off 😀

    Your CSS says the background color should be green (#006400) ONLY when the width of the devices is 482px or more. So, of course, that will exclude most mobile devices… which explains why you don’t see the green background colour on mobile devices.

    You have a mobile-first design (ie everything is designed for mobile unless specifically changed for larger screens). So to apply the green colour to mobile as well, we just need to change the default background colour from white to green. Add the following CSS code into APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.

    #masthead {
background-color: #006400;
}

    If you want the green header to be end-to-end (ie no white space to the left and right), you’ll need to remove the 15px margins on either side and push the max-width to 100%, like:

    #masthead {
background-color: #006400;
margin-left:0;
margin-right:0;
max-width: 100%;
}

    I’ll also advise that you change the current background green color (#006400) to match the green background color of your logo (#195f00)… so that the logo can fully blend in with the rest of the header, with no rectangular box around it.

    I hope that helps 😀

    • This reply was modified 3 years, 2 months ago by George Appiah. Reason: Fix some typo put in by my cat
    Thread Starter carldavidcarlstrom

    (@carldavidcarlstrom)

    3 years, 2 months ago

    Hello!

    Thank you Joy, you are of course right. I should ask in the proper support forum. I´m kind of new on asking theme questions.  

    Thank you George for your delicate answer. I really appreciate you writing back and want to help me. You are of course right, how foolish of me to have put the min width to 482px or more.

    But I think there’s something else going on here as well. Removing @media and only min-width 482px didn´t help and I tried it before and it didn´t work. I tried to use your code and it looked good on mobile but the header looked too high on the desktop. When I added the padding-bottom: 0%; and padding-top: 0%; to adjust the height on the desktop the background-color disappeared on the mobile. 

    I want to make the header look ok on the desktop and it didn´t look good with height: xxpx or max-height: xxpx. 

    So I ended up with this code and now it looks better on both desktop and mobile …

    @media only screen and (min-width: 482px){
    #masthead {
    background-color: #006400;
    margin-left:0;
    margin-right:0;
    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0%;
    padding-top: 0%;
    }
    }

    @media only screen and (max-width: 482px){
    #masthead {
    background-color: #006400;
    margin-left:0;
    margin-right:0;
    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 9%;
    padding-top: 9%;
    }
    }

    If you think there is an easier way to do it then you´re welcome to tell me. 

    Thanks I will fix the green color 😉

    Thank you!!
    David

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive header background-color 2021’ is closed to new replies.