WordPress.org

Ready to get started?Download WordPress

Forums

Change image based on screen size - twenty twelve (6 posts)

  1. jondalrymple
    Member
    Posted 3 months ago #

    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! :)

  2. Adrian Houle
    Member
    Posted 3 months ago #

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

  3. jondalrymple
    Member
    Posted 3 months ago #

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

  4. Adrian Houle
    Member
    Posted 3 months ago #

    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. http://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.

  5. jondalrymple
    Member
    Posted 3 months ago #

    thanks. I'll give it a try! :-)

  6. Adrian Houle
    Member
    Posted 3 months ago #

    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)

Reply

You must log in to post.

About this Topic