0

What I'm trying to accomplish is: After minimizing browser to certain width, 600px in my fiddle's case, stop the css rule: display: inline-block from making my container boxes from becoming 1 column. I would like it to stay at 2 columns.

Additional notes: I am using jQuery plugin: Mixitup.

This is an example of the jQuery plugin's code, but not MY code as it is much larger than this: http://codepen.io/jzhang172/pen/EVGNqj

What I tried doing: Using CSS rule @media all (max-width:600px) I tried messing with the display: "value", but no good. I figured the answer will be a javascript solution but I'm no expert at Javascript.

Jsfiddle:http://jsfiddle.net/jzhang172/886mbLbq/

.box{ width:200px; height:200px; background:black; display:inline-block; } @media all and (max-width:600px) { #container .box{ display:block; } }
<div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

Improve this question

2 Answers 2

Reset to default
1

To keep them in no less than 2 columns, set a min width on the container.

Sample 1: The extra 4 in 404px is to make up for inline elements extra margin (white space). You can read more about that here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Sample 2: If you don't want to use the inline-block hack, use floats. The extra box-sizing: border-box; is for making the temporary border I added for visibility, to stay within the box width/height

Flex would of course be a third way (no sample of that here though/yet).

Using inline-block:

#container { min-width: 404px; } .box{ width:200px; height:200px; background:black; display:inline-block; }
<div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

Using floats:

#container, .box { box-sizing: border-box; } #container { min-width: 400px; } .box { width:200px; height:200px; background:black; float:left; border: 1px solid #ccc; }
<div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

The 4px inline block hack is very, very unreliable and is not a cross browser fix.
@NickSalloum If you read this, css-tricks.com/fighting-the-space-between-inline-block-elements, you'll see it works from IE8 and cross browser.
@NickSalloum Now I also added a float version, so if you downvoted prior to give me a chance to reply, you might consider remove that.
1

You might want to try using floats instead of inline-block. This way you could target every element 1st, 3rd, 5th, etc. element to start a new "line" with a clear. Here is an example of the CSS:

.box{ width:200px; height:200px; background:black; margin-right: 4px; /*or whatever you want; this is your spacing*/ margin-bottom: 4px; float: left; } @media all and (max-width:600px) { .box:nth-child(2n+1) { clear: left; background:red; /*I put this here just so you could see which one...*/ /*...is getting the clear. Get rid of it when ready. */ } }

https://jsfiddle.net/326bby8x/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.