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: Mobile view:
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...
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.
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.
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!
Hello Jay Ma, This might help you : http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ thanks,
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/
I just ran a test for iPhone 5, check out how nicely it looks: http://quirktools.com/screenfly/#u=http://pizzaguys.ca/&w=320&h=568&a=37 I am not sure how you're going to make it look better if you place them side by side?
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.
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?
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!
Responsive images? You want some essentially useless adult children to give a soft roar as well? That takes some positively neutral emotional reasoning... 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.