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
67 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
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

Do you have a plan for Continuity?

It's inevitable. People leave organizations creating a gap in your service. That's where Percona comes in.

See how Pepper.com relies on Percona to:
-Manage their database
-Guarantee data safety and protection
-Provide database expertise that is available for any situation

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This video teaches users how to migrate an existing Wordpress website to a new domain.

623 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