Streaming live at 10am (PST)

Scaling image for mobile view


#1

Hi all,

I've been trying to make my website www.hubebub.com fully responsive and I've run into a small problem. I've placed an image in my footer which is quite wide and displays just fine on desktop and tablet.

Not so much on the mobile as it loses all proportions. pensive

I've tried scaling the original image down but the difference in quality of image was far too noticeable.

Is there a way to maintain a height of 104px in the desktop/tablet version and amend the size in the mobile view to make it less deformed?

Appreciate your thoughts!


#2

Hi @kikiriki, good question. Without more information I can't say for certain, but it sounds like you'll want to not set the image size and instead assign it a class with a width set with %.

If you update your post with some more information, we can help you faster. Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile


#3

Hi, thanks for you reply. smile I'll throw together a screencast so that you can see what I meant by the image not scaling properly.

It's possible that it could be nested in a better way. My design skills are slightly...ahem...unorthodox.


#4

@thewonglv I hope this illustrates it a little better! http://screencast-o-matic.com/watch/cofjVXe9ih


#5