Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-12-16
12
Medium Priority
?
76 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.
0
Comment
Question by:lapucca
  • 5
  • 4
  • 3
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40503134
How are they laid out?
Some HTML or a link
0
 
LVL 58

Expert Comment

by:Gary
ID: 40503213
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

0
 

Author Comment

by:lapucca
ID: 40503736
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 43

Expert Comment

by:Rob
ID: 40503773
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40503777
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

0
 

Author Comment

by:lapucca
ID: 40503868
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%;
      }
}
0
 
LVL 43

Expert Comment

by:Rob
ID: 40503886
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.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40503900
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">
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40503992
320px is the "defacto standard" for portrait, unfortunately there is no "defacto standard" and every device is different

Trying to get a design to be pixel perfect is an impossibility
As Rob has said above you may need 400px but then that will probably break it on other devices.

The moral of the story is: "you can please every device some of the time and some of the devices all the time, but you can't please all the devices all of the time."
0
 

Author Comment

by:lapucca
ID: 40504983
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%;
      }
0
 
LVL 58

Expert Comment

by:Gary
ID: 40504992
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)
0
 

Author Closing Comment

by:lapucca
ID: 40511217
Thank you both for your help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question