1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make images responsive

Discussion in 'HTML & Website Design' started by JayMa, Jul 2, 2015.

  1. #1
    Hello DigitalPoint peeps! My apologies in advance if this post is a little amateur-ish, but a myriad of Google searches with varying queries turned up no result.

    If you see in the first screenshot, the two "deals" and "account" images stack beside each other perfectly on desktop, but on mobile they stack on top of each other. Is there any way to get them to stack beside each other (like on desktop) all the time?

    (And please don't suggest combining the images because they link to different pages and image maps don't work well on mobile.)

    Desktop view:
    [​IMG]

    Mobile view:
    [​IMG]
     
    Solved! View solution.
    JayMa, Jul 2, 2015 IP
  2. #2
    A quick Fix.
    Add this in the image tag of these buttons:
    style="height: auto; max-width: 40% !important;"

    You Can play with that 40% amount to get the desired result. Keep the % amount same in both the image..

    *Expecting the real size of both these images will be the same...
     
    Mike In, Jul 2, 2015 IP
  3. JayMa

    JayMa Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thank you, your suggestion worked perfectly in our offline test. However our online ordering provider doesn't allow for <img style="max-width:XXX"> tags so if anyone has any other suggestions, they'd be much appreciated. :)
     
    JayMa, Jul 3, 2015 IP
  4. Mike In

    Mike In Active Member

    Messages:
    244
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    90
    #4
    I do not know what you are using.
    Still sometimes, in case of WYSIWYG editors there is option to set custom style,
    If there is something like that You can set it there.

    Or,
    If you have access to the CSS file and has the ability to assign a class name or Id to these buttons. Then also,
    By add a certain line in the CSS file to get your desired result.
     
    Mike In, Jul 3, 2015 IP
  5. JayMa

    JayMa Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Yeah I thought of alternate implementations too, but they flatout just don't allow us to configure the image width. Is there any other way to get the desired effect without adding an image width tag? Thanks though!
     
    JayMa, Jul 3, 2015 IP
  6. mr.manan

    mr.manan Active Member

    Messages:
    268
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #6
    Hello Jay Ma,

    This might help you :

    http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
    thanks,
     
    mr.manan, Jul 3, 2015 IP
  7. Mike In

    Mike In Active Member

    Messages:
    244
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    90
    #7
    Hi @mr.manan you deleted your above message (1st reply) to the thread and wrote it again????
     
    Mike In, Jul 3, 2015 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #8
    My question is why do you NOT want for them to stack upon each other? If someone views the page in, let's say, iPhone 5 in vertical position, the images will look all squashed if placed side by side. Or you will have to make them tiny to look presentable. Always test your results with all mobile devices. You can do it via: http://quirktools.com/screenfly/
     
    qwikad.com, Jul 3, 2015 IP
    kk5st likes this.
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    qwikad.com, Jul 3, 2015 IP
  10. Mike In

    Mike In Active Member

    Messages:
    244
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    90
    #10
    Hmm, it really looks very nice! @qwikad.com , do not take me wrong but he may not be looking for the suggestion regarding there base website but, any way to get what he want's in the 3rd party website, whose snapshots he has uploaded.
     
    Mike In, Jul 3, 2015 IP
  11. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #11
    No idea why they don't want a max-width on the images via CSS, but hey... my question is more of the kind: why in the name of all that is holy are these images in the first place? Why not just CSS styled a-tags or buttons or or or?
     
    PoPSiCLe, Jul 3, 2015 IP
    deathshadow likes this.
  12. JayMa

    JayMa Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    Haha thanks @qwikad.com, @Mike In is right our base website (pizzaguys.ca) is just fine. It was for our third-party online ordering site (ehungry.com/pizza). I guess it messes up their site layout or something @PoPSiCLe thanks for the suggestion though.

    I'm just gonna leave it as-is thanks to @qwikad.com's point. Thanks everyone!
     
    JayMa, Jul 3, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Responsive images? You want some essentially useless adult children to give a soft roar as well? That takes some positively neutral emotional reasoning... :p

    It's an oxymoron; PoPSiCle had it right, why the blazes are those even images in the first place when they are essential text; the same goes for that massive image in the header; it's a laundry list of how NOT to build a website if you care about accessibility, the stepping stone one should have before even THINKING about responsiveness since responsive design is the last in a LONG line of accessibility norms one should have on a page.

    In that way BOTH your site and ehungry.com are poster children for much of what's wrong with web development today -- from illegible colour contrasts, to images for text, to "semantics, what's that?!?" to endless pointless scripttardery... Someone's put the saddle on you and taken you for a ride.
     
    deathshadow, Jul 4, 2015 IP