Announcement

Collapse
No announcement yet.

separate images for different screen sizes

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • separate images for different screen sizes

    I am trying to use an image in a text widget with a link to another page on my site. The problem is that when viewed in small screen sizes, it shrinks down and looks funny. I would like to use one image for large screen sizes (desktop and tablet), and another image for smaller screen sizes (mobile). I'm not sure how to go about this. Should I use a hook? Or is there an easy code?

    Here is the site I'm talking about: http://test.awholenewtwist.com

    For a visual example, I created two text widgets below the posts which say, "See more recent Recipes"

    I labeled the two text widgets small and large. I would like for the large image to display on desktop and tablet, and the small image to be viewed on mobile screens.

    The code for the "Small" text widget is:

    <a href="http://test.awholenewtwist.com/recent-posts/"><img class="alignnone size-full wp-image-2605" src="http://test.awholenewtwist.com/wp-content/uploads/2015/12/See-More-Recent-Recipes-Small.png" alt="See-More-Recent-Recipes-Small" width="479" height="45" /></a>

    The code for the "Large" text widget is:

    <a href="http://test.awholenewtwist.com/recent-posts/"><img class="alignnone size-full wp-image-2606" src="http://test.awholenewtwist.com/wp-content/uploads/2015/12/See-More-Recent-Recipes-Large.png" alt="See-More-Recent-Recipes-Large" width="1280" height="81" /></a>

    Can anyone help me with this, I'm a newbie at coding.

    Thanks!

    Schedule

  • #2
    In Wordpress 4.4 (given you already use it - I would guess), you shouldn´t need to go with coding and there shouldn´t really be much to do. You might want to check the image sizes in your Wordpress settings. Please look out for articles describing how the new "responsive images" feature works. I quickly googled and chose this one, but there might be better ones: http://wptavern.com/joe-mcgill-expla...-wordpress-4-4

    You should also test how the images look on an actual mobile device because when you just resize the window, WP might not "recognize" that you´re trying to "simulate" a mobile device that way.

    (Hint: Using pictures for text isn´t a real good idea in responsive sites - text in pictures that get resized always looks blurry. Try to go with actual text whenever possible)
    Last edited by SiGa; 12-22-2015, 06:30 AM.

    Comment

    Working...
    X