[Solved] Responsive Image The Right Way

[Cathyk]

I’m working on a responsive image, URL is http://visualsgd.net/Testing/responsiveimage/bxslider.html. Can’t seem to get my head around the responsive layout/css for the image on the left. I would like it to be resize with browser. However, when I apply a % to the wrapper, it pushes the items on the right side down. Any help greatly appreciated!

[Paulie_D]

It looks like you have hard pixel values in your HTML, possibly inserted by JS.

That might be an issue.

[Cathyk]

Yes, referring to the .bx-wrapper, need to have the width:740px so the items on the right are not pushed down. I’ve tried applying a % to the .bx-wrapper but when I do it’s either too small or too big.

[Paulie_D]

Any time you use fixed pixel values you lose responsiveness.

Assuming you are using this: http://bxslider.com/ it seems likely that your implentation is wrong somewhere.

Perhaps you could make a reduced case in Codepen.io.

[Cathyk]

Thanks for the suggestion, Paulie_D. And yes, my implementation is obviously wrong somewhere. The reason I posted here. I’ve also created what I thought was a “reduced case” by uploading the files and giving the URL which has the files I’m working with. If there is a better way, please advise.

[Cathyk]

For those who are looking for a simple CSS solution to responsive images, check out this tutorial http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756.

Found my answer to be quite simple, here’s the CSS I used:

.bx-wrapper {width: 55%; max-width: 740px;}
.bx-wrapper img {display: block;height: auto !important;width: 100%;}

[Author]

Posts