We help IT Professionals succeed at work.

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

lapucca
lapucca asked
on
91 Views
Last Modified: 2014-12-20
Hi,
I'm using bootstrap 3.  I have 5 icons that are on 2 lines when in XS mode and it looks nice when the phone is in vertical mode.  However, when users change to horizontal on the phone, the 5 icons got very large spreading on 2 lines.  Is there a way to make them stay in one line when in horizontal mode?
Thank you.
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
How are they laid out?
Some HTML or a link
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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;
	}
}

Open in new window

Author

Commented:
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.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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.
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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%;
	}
}

Open in new window

Author

Commented:
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%;
      }
}
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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">
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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%;
      }
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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)

Author

Commented:
Thank you both for your help.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.