twentytwelve child theme responsive header

  • I have a child theme of twentytwelve that I am working with and I have four images in the header (custom coded). When I view the site on my Droid Razr M, the images overlap and generally break the page.

    Ideally, I’d like the header to display different images based on size of screen. Is this possible?

    For instance, I’d like a 320px width to just show the logo at 320px, but I’d like larger screens to show all of the header images.

    Any help is greatly appreciated! ??

    https://themusclerelaxers.com/wp

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

  • Since the images are custom coded, assign an ID of logo to the logo and a class of header-image to the others.
    Then you can use css @media queries to display: none; on the header-image class.
    You could also then use the logo id to center the logo for mobile devices.

    Thread Starter atlcr

    (@atlcr)

    Thank you! I’ll give that a try.

    Batharoy, how do you do that? I’m not a coder, so your explaination makes sense, but could you give some example code that I can modify to work on my site? My need is a little different that atlcr but really similar. I want to show a different image on the smaller screens, not a logo.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘twentytwelve child theme responsive header’ is closed to new replies.