I know I can use col-xs-# to keep columns from stacking, but I have inherited a site when everything uses col-md-#. The site looks fine when the browser is full screen, but when you resize it to around 50% of the screen the columns stack even though there is still a lot of screen real estate. How can I redefine the col-md-# classes to not stack, so I don't have to find & replace all of them with col-xs-# ?
Full Screen
Browser width 1100px
You can customize Bootstrap the way you want before download it.
For version 3, take a look at this page https://getbootstrap.com/docs/3.4/customize/#media-queries-breakpoints
The default value of #screen-md param is 992px. Above this viewport width the columns (.col-md-*) will render side by side.
Althought I think this is not a best practice, all you have to do is lower this value to something above 768px (the previous breakpoint).
Important! Don't lower this value to less than 768px or you'll end up into serious grid issues.
I strongly recommend you to find-and-replace all col-md- to at least col-sm for your project.
To answer your question, adding the following CSS should do the trick.
In the first line of the media query, change 600px to the breakpoint where you want to stop the columns stacking.
#media (min-width: 600px){
.col-md-2 {
width: 16.66666667%;
float:left;
}
.col-md-3 {
width: 25%;
float:left;
}
.col-md-4 {
width: 33.33333333%;
float:left;
}
.col-md-6 {
width: 50% !important;
float:left;
}
}
Good luck
Related
I'm using Bootstrap 4 and noticing that I'm losing precious horizontal real estate at every breakpoint. I'd like for the outermost container to be 100% wide any time the browser is < 1200px.
I added this to my CSS:
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: 1140px;
}
}
I used 1140px as the width because that's what the documentation said the max width of an element with .contianer can be.
You can see it here.
When I resize the browser, everything adjusts as I intended, but is this just a case of getting lucky and that changing the width from Bootstrap's core values totally jacks up the grid? Is here a "correct" way to do this using .container-fluid?
Here is the exact solution of your question: https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap
When you are using Bootstrap 4, you should use it's basic features like media-breakpoints.
In the bootstrap_config and _variables you can specify the point of each breakpoint at how wide the screen should be to trigger it.
NOTE: in this case, the lg stands for your own choise wich breakpoint you want to give the value 1200px
In this case if you config your boostrap to trigger the lg classes at 1200px, then if you add the following code, on every screen which is less wide than 1200px, the container class will be 100% in width.
#include media-breakpoint-down(lg){
.container{
width: 100%;
max-width: 1140px;
}
}
So you basically want your container to behave the same way as .container-fluid when your viewport is less than 1200px. I think Patrik's answer is the most correct way to do this (by modifying the source file), but if you don't want to do that, then I think your method is OK.
However, I think the CSS you are using in your ruleset could be revised. You could set the max-width property to none which is the default value for that property. This has the effect of unsetting whatever Bootstrap's CSS applies for this property.
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: none;
}
}
MDN article showing none as the default value for max-width:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am having problem in making a screen center for small screens
I've created 1500px wide long page designed in photoshop and sliced into tables.
i used the following code to center my page
width:1500px;
margin: 0 auto ;
position:relative;
to make it center , its good on big screens but in small screens a horizontal scrolls appears and its all to left i want to in middle as a default and i can remove it using overflow x hidden.
Problem with your code is, you used tag and gave width of 1500(not dynamic) also i got containers(#index-07_,#container12) with style of
width : 1500px
instead of using
max-width:1500px
change them also add style(obviously not good choice; you may choose specific image tag but for quick fix it will work for you)
img{width:100%}
i hope it may worked for you
Your applying a static width to page, so if your viewing in small screen, page gets overflow, so in this case you have to adjust the page width with respect to screen resolution. It can be done by using media query, refer the below link about media query - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use your CSS code with different static width in different resolution like
#media (max-width: 600px) {
.smallerscreen{
width:1500px;
margin: 0 auto ;
position:relative;
}
}
#media (max-width: 300px) {
.smallerscreen{
width:500px;
margin: 0 auto ;
position:relative;
}
}
After reviewing your code, you have go with max-width instead of width in container class as said by Neel.
.container12 { max-width: 1500px;}
Also set image width as 100% as like in below code.
div[id^="index-"] > img[id^="index_"] {
width: 100%;
}
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}
I'm looking into the whole responsive design thing and finding fluid grids great for that - the only problem is they seem to break when I try to give a fixed width to any column. As you shrink the screen, the columns pop out of float. I'd have expected a fluid column with a percentage width (or no width) just to shrink, leaving the fixed width columns in place. How easy is it to create a hybrid fluid/fixed grid like this? I've seen one solution with inline-block instead of floated blocks, but how good is that across browsers, and is it a clean way of doing things?
Here's an example of the problem: http://jsfiddle.net/andfinally/nJ97q/2/
Thanks!
Fred
Set min-width on the wrapper div to the minimum width of the two fixed columns + a little for the next column. This makes it so it doesn't push.
#row { min-width: 400px; }
The one caveat is that it isn't supported by IE6 and below and can be buggy in IE7.
--------- EDIT -------------
What would work best for you in this situation I think would be a display: table-cell setup. This will allow everything to be locked to the positions that you are looking for.
.main {
padding: 10px;
background: #efefef;
display: table-cell; //this locks to #sideNav
}
#sideNav {
display: table-cell; //this wraps the sidebar and middle and locks to main
width: 280px;
verticle-align: top;
}
.middle {
display: table-cell; //this locks with .sidebar
width: 140px;
padding: 10px;
background: #bbb;
}
.sidebar {
display: table-cell; //this locks with .middle
width: 100px;
padding: 10px;
background: #555;
}
http://jsfiddle.net/nJ97q/73/
There's no clean way of doing this. But who needs clean?
I wouldn't reccomend mixing fixed and fluid widths, but if you are, you might need media queries (plenty of polyfills available for IE). You could then check if the container is smaller than X in which case you rearrange the layout (1/3 for all columns or just everything vertical etc).
The example is a little strange though. What's in all the white space in the middle? Which is the content?
PS. Don't use min-width. That invalidates the whole responsiveness.
I'm wondering why just not to use tables?
Like:
<table class="row">
<tr>
<td class="main">
</td>
<td class="middle">
</td>
<td class="sidebar">
</td>
</tr>
</table>
It become very simple using table layout, there is no JS, same column height, full compatibility with any browser.
Here is the example: http://jsfiddle.net/nJ97q/162/
I know everybody says that using tables is bad practice, but it really solves all this issues.
I think the solution below can probably help you.
Since you are giving the "row" div width in percentage, its resizing itself every time you shrink the window. Give it a width in pixels if you can, if you can't then use min-width so that it will not re-size below min-width and thus your panel will remain intact.
To make it smooth:
You can add javascript to make it smooth. Use window.onresize event to call a function which includes code to make "row" resize slowly by using timed function which increases width of the "row" by 10 pixel or so every 10 miliseconds till the max-length, in this case the window's length is reached. But you can effectively do this if you set the width in pixels, or else an ugly zoom-out, zoom-in effect will be produced.
Hope that helps,
Ashwin
I had a similar issue where I needed to have a fixed width left column (menu structure) but have the right column resize responsively as the browser was reduced.
I ended up implementing a few extra media queries (they already existed to handle other edge cases) and finding the percentage width of the right column that worked for that media query. This does "jump" slightly (I only used 2 "extra" media queries over the standard handheld/tablet/desktop ones) but at all resolutions in between it will not break to the next line. In effect you are adjusting the context in each media query before it can break. More media queries would equal smoother breaks as the browser is resized.
I am ok with the jumps because I am not building for the use case of someone resizing their browser, but rather to make sure it works acceptably on different resolution devices.
One caveat, when figuring the percentage widths of the right column, the base width used is the width of the media query you are in, not the original full width. Also, you have to use min-width and use the size that works at the smallest resolution for each media query section.
/* 641+ */
#media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377 / 641 */
}
}
/* 725-768 */
#media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460 / 725 */
}
}
/* 769+ */
#media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504 / 768 */
}
}
/* 860-990 */
#media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595 / 860 */
}
}
/* 990+ */
#media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}