responsive images in header – twentytwelve

  • hi,

    just futsing around with a new site for a yoga studio. i’d like to have small images below the header image that link to the google map, studio email, and schedule respectively. if you look at my preliminary dev site here: lyc.psychic-compass.com you’ll see a crappy looking white button image i added below the header with the studio email address. (i want to put three of those buttons that look nice and then hyperlink them where they need to do). i’m pretty sure i know how to do that – but it still looks crazy on my iphone. The images dont scale down and behave responsively from screen to screen. how can i change that?

    it’ll be a twentytwelve child theme

    kelly

Viewing 1 replies (of 1 total)

  • If I understand correctly, what you want is for those three buttons to scale down as the screen size decreases, but stay in one line across the screen instead of becoming stacked vertically once the screen gets really narrow?

    That means your solution will have to do two things:

    • Scale its width to be 100% of the width of the screen.
    • Not allow any increase in height.

    I haven’t tested this, but I think the first thing I’d try is to put the three test images in a div with an id of “nav-buttons” and then in your child theme’s style.css set the following:

    #nav-buttons {
  width: 100%;
  max-height: 42px;
  text-align: center;
}

#nav-buttons img {
  width: 30%;
  max-width: 231px;
}

    That’s assuming all of your images are 231 x 42 px like the one up there.

    I’d give that a try and see what happens.

Viewing 1 replies (of 1 total)
  • The topic ‘responsive images in header – twentytwelve’ is closed to new replies.

Tags