4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

How to make responsive infographics?

by Kalambur
3 replies
  • WEB DESIGN
    • |
Hi there, guys!
I have a simple question. We all know, what an infographics is. Simply put, it is an image that has, for example width=1000 px, height = 2000 px.
How can I make this image responsive?
I don't want to invent something new. I just want to know, how it is accepted to make infographics mobile friendly.
Thankx!
#infographics #make #responsive
  • Profile picture of the author peteJ
    If what you have is an image you can wrap it in div that has a % width and set the dimensions of the image to be 100% so it scales with the div. Issue with this is that you're scaling an image which is going to make it hard to read as it gets smaller and smaller.

    My best suggestion would be to convert a static image into HTML and CSS and code it up like that. You'll have a lot more control over how it scales down, and can adjust positioning and sizes accordingly.
    {{ DiscussionBoard.errors[10002622].message }}
  • Profile picture of the author JaMoke
    Seen this problem before, here's what works for me

    Load the Original image you want at the size you want (width=1000 px, height = 2000 px).

    When you code the image instead of <img src="images/yourimg.jpg" height="1000" width ="2000">

    delete the size specifications so it will be <img src="images/yourimg.jpg">
    Signature
    WordPress Theme for Affiliate Marketing? Get My Personal 100+ Free High Converting Landing Pages for Affiliate Marketing When Using My Link
    {{ DiscussionBoard.errors[10004756].message }}
  • Profile picture of the author Mooredesigns
    When designing a responsive infographic, choose your layout carefully. If you select a proper layout, more people will share it.
    Signature

    Learn more about web design at http://mooredesignstore.com.

    {{ DiscussionBoard.errors[10004850].message }}

Trending Topics