Change image based on screen size – twenty twelve

  • I have a child theme of twentytwelve that I am working with and I have an image in the header. When I view the site on my iphone the image is too small to see details.

    I’d like the header to display a different image based on size of the screen. I know you can use media queries to make changes to layout etc using CSS, but can it change the source of the image?

    Any help is greatly appreciated! ??

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

  • Hi. You cannot change the source of an image with CSS. It would be a very simple Jquery script though.

    Thread Starter jondalrymple

    (@jondalrymple)

    Hi Adrian, I appreciate your response. Can you point me in the right direction to learn how to create a Jquery script?

    Well if you wan’t to learn it from the ground up start here, I just finished the course and it only took my about 6 hours. https://www.codecademy.com/

    Otherwise just google search “replace image source Jquery”

    You may want to do the first few lessons in codeacadmey so you get the feel of setting up a Jquery document, and how linking documents work, that way you don’t get hung up on why your copied code won’t work. (Like most examples don’t show the doucument.ready stuff that tells the jquery when to execute, and you need that.

    Thread Starter jondalrymple

    (@jondalrymple)

    thanks. I’ll give it a try! ??

    oh be warned that lesson lets you pass when you have actualy done it wrong, so you gotta make sure your actualy getting the proper results on each lesson (big possible hang up point for new learners)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change image based on screen size – twenty twelve’ is closed to new replies.