Headers Responsive to Mobile (4 posts)

  1. loosecanon_nick
    Posted 1 year ago #

    I'm a bit of a noob here, but where can I start looking within the theme editor to make the header background image better adapt to smaller screens?

    For example: http://loosecanon.nerdglow.com

    Looks great on a desktop, zooms in on the center guy on a phone.

  2. themediaship
    Posted 1 year ago #

    I struggled with this for a long time. I think the idea of having an expansive header is awesome, but realistically it only looks good on computer screens for now. I'm not an expert, but if there was a way to change the image at certain breakpoints that would be amazing.

    For the time being here's what I did.

    1. Got rid of the concept of using the full header space.

    2. Disabled the parallax effect.


    3. Created an image file that measured 700px x 650px.

    4. Created this CSS code to coincide with the dimensions.

    `#masthead {
    background-size: 100% !important;
    height: 500px !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    Here's how it looks on my site:


    This is simply what worked for me, albeit it's not exactly what I wanted in terms of the header layout, but it is definitely responsive now. I'd rather see the full header on a phone and computer screen, so I was willing to give up the real estate size. I would like to see the theme have an option embedded on how to change the image out at different breakpoints, may be asking too much, but I'm still searching for other options. if I come across any other solutions, I'll let you know.

    Best of luck,


  3. loosecanon_nick
    Posted 1 year ago #

    Thank you for the advice! Where do I insert that code: header.css, style sheet or what?

  4. themediaship
    Posted 1 year ago #


    I'm using a child theme, so I inserted the code into the style.css of my child theme. If you don't have a child theme I would recommend taking the time to make one.

    This is the code I used to import the css files from the eighties parent theme.

    '@import url('../eighties/style.css');'

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic