[HELP] 4 items align in a row without any gap

[r1nk]

I’m stuck of what selectors i need to add/edit to align all these ‘4 col-x items’ in a line so that they wont stack with each other or have any gaps.

This is what im trying to make : http://i272.photobucket.com/albums/jj178/r1nk_2008/ps1_zpsowz5koxd.png

But now currently my webpage view as this : http://i272.photobucket.com/albums/jj178/r1nk_2008/bannerProb_zpsn52mjdar.png

This is my current codes : https://codepen.io/nazrinnoorzan/pen/bYaKwz

Some solutions including explanation why all those items not align neatly would be a great help.

[Paulie_D]

Firstly, I’d suggest you reduce the demo to just the relevant HTML & CSS.

No-one likes to have to wade through dozens of lines of irrelevant code to narrow down your issue.

Also, what gaps? It looks to me as though you images aren’t large enough to fill their divs….not that there are gaps between the divs.

A minimal demo is needed here.

[r1nk]

Sorry about that. Here the minimal one.

https://codepen.io/nazrinnoorzan/pen/bYaKwz

So, if i want to make my images take 100% of the container, i need to set my img style to width = 100; and height=100; ?

[Paulie_D]

Just `width:100% will do it…but you have columns of different widths so you may not get the effect you are looking for…

https://codepen.io/Paulie-D/pen/WXdgma

[r1nk]

https://codepen.io/nazrinnoorzan/pen/bYaKwz

Thanx, there is no more width gap but the height are differents and if i resize the windows, the right img will stack on the form.

Hmmm, do i plan it wrong? Is assigned each column some width percentage a bad idea? (i do it for responsive purpose)
Or do i need to alter more on sumthing?

p/s : those 3 images are in same height.

[Author]

Posts