Bootstrap, how to adjust 5 icons to be smaller and on one line when user change to horizontal on their mobile device?

How are they laid out?
Some HTML or a link

Replace the media query that Rob gave you in the other question with this (which is what you want I assume)

@media (max-width: 320px) {
	.col-sm-25 {
		width: 33.333%;
		float: left;
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}
}
@media (min-width: 321px) {
	.col-sm-25 {
		width: 20%;
		float: left;
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}
}

Select allOpen in new window

Gary,
Yes, this is a continued question related to " Asked On2014-12-03 at 12:41:37ID: 28573941" that Rob helped me with.  In my currently code, for XS mode, I have each icon has xs-col-4 so 3 on 1 row and 2 on 2nd row.  That's because all 5 in one row in xs mode would look too small.

I will try the code you provided now and see if that works.  Thank you.

I don't want any points for the comment i'm going to make but that's exactly what Gary has given you in the media queries.  If the width of the device is 320px or smaller i.e. portrait orientation, then use the 33% width for each object.  If the width is larger than that, i.e. landscape orientation, then use the 20% to fit all the objects on one line.

Suppose I should tidy it up

.col-sm-25 {
	width: 33.333%;
	float: left;
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
@media (min-width: 321px) {
	.col-sm-25 {
		width: 20%;
	}
}

Select allOpen in new window

Thanks rob for commenting here.

I have both code.  It does fix the horizontal problem but in vertical mode, it created problem.  Instead of 3 icons on one line and then 2 icons on 2nd line, it create 5 smaller icons all on one line.  The problem with that is my text under the icon(label) gets warp around to 2, 3 lines and just ugly because it's a word or 2 that got broken up.

I would like vertical to keep the 3 icons then 2 icons like before and just change to 5 icons on one line when it's tilts to horizontal, is that possible?


@media (min-width: 768px) {
    .col-sm-25 {
        width: 20%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 25px;
        padding-left: 25px;
    }

}

.col-sm-25 {
      width: 33.333%;
      float: left;
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
}
@media (min-width: 321px) {
      .col-sm-25 {
            width: 20%;
      }
}

you just need to adjust the min-width value of "@media (min-width: 321px) {" to suit your device.  It may need to be 400px... depends to what devices you are wanting to support.

test this with your phone: http://jsbin.com/kahodi/3/quiet

I tested above with my Samsung Galaxy S3.

I've also added the viewport meta tag, which is so important with these things:

<meta name="viewport" content="width=device-width, initial-scale=1">

Rob,
Yes, that line of code is in the header.  Thank you for the reminder.

Gary,
Yes, agree and understand.  I thought about that yesterday too.  

I have a question about the 2 "col-sm-25" classes.  So at min 768px, it will use the one by Rob because it's enclosed in the @media brace?
Can I change the 2nd class name to "col-sm-33" instead?  I'm confused with the 2nd "col-sm-25" class, it's declared to use 33% width and then below it it uses that class with parameter as 20%,  How does that work?  what is it doing?  I get Rob's class but yours is more complicated and appreciate the opportunity to learn how it works here.  Thank you.
@media (min-width: 321px) {
      .col-sm-25 {
            width: 20%;
      }

Remove the css code Rob gave you, just use the one here http:#a40503777

The code sets a default width of 33% for the icons and then when the resolution goes above 321px wide it switches to 20% wide

(Maybe having Rob's code there as well is the reason it wasn't working)

Thank you both for your help.