Making header image responsive — some simple css help:

Community Forums Forums Design Tips and Tricks Making header image responsive — some simple css help:

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  jgk 1 year, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #72927

    jgk
    Participant
    Post count: 27

    Hi!

    I’m trying to make the header image responsive (I’m using both image and text). The only issue is when I shrink the width of the page to less than 960px, I can get the background image to go to the bottom of the div and center.

    I’m sure this is an easy fix but I’m spinning my wheels.

    Thanks for any help!

    J

    http://mdblog.wpengine.com/
    #72932

    jgk
    Participant
    Post count: 27

    never mind, got it.

    #72933

    Jamie Lynch
    Participant
    Post count: 11

    I am having the same issue. I’m using Executive Pro for the 1st time (html 5). I’ve used Executive Child Theme for years and this new Executive Pro version has a HUGE learning curve. I’ve had to add my header image in the .home-top section. If you find the answer to you question, please be kind and share it with me.

    website: mdbankruptcycenter.com

    #72935

    jgk
    Participant
    Post count: 27

    Hi Jamie,

    For each of the “break points” on your media queries in the css (which occur at the bottom of the CSS) you’re going to want to change the below:

    .home-top {
    background-image: url(images/home-top.jpg);
    }

    to other images that are the proper size.

    If you look at the code for some of the elements on the page that are responsive in developer tools you’ll see the media queries applying to the elements when you shrink and grow the width of the browser window. Hope this helps.

    J

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.