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
59 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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 500 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

828 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