Changing a columns width from 60% to 100% on media queries change - css

I'm using the Zurb Foundation 3 framework and I have the following layout.
<div class="row">
<div class="eight columns">
Main content...
</div>
<div class="four columns hide-for-medium">
Sidebar...
</div>
</div>
How can I make the eight column grid take up 100% of the width when the four column grid disappears on medium sized displays? At the moment on a medium sized display when the four column grid goes to 'display: none', the eight column grid still takes up just eight columns when ideally it would fill 12 columns (full width).

I managed to solve my problem, it just requires a specific Media Query and overriding the width and float values.
#media only screen and (max-width: 1279px) and (min-width: 768px) {
.test {
float: none !important;
width: auto !important;
}
}

Related

How can I override the width of container to 1440px and make the columns in the same time Responsive using Bootstrap 4 and Scss

How can I override the width of container to 1440px and make the columns in the same time responsive. I am using Bootstrap 4 and SCSS.
<div class="container">
<!-- Container 1440px-->
<div class="row">
<div class="first"></div><!-- Section 825px-->
<div class="second"></div><!-- Section 615px-->
</div>
</div>
The media query will adjust the width of your container to 1440px only on screens larger than 1200px (or whatever width you want). It will maintain the responsiveness of your website too!
#media (min-width: 1200px) {
.container {
width: 1440px;
}
}

downsize width and margin-top

Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!

how to create margin between bootstrap columns without destroying design?

I have my simple markup
<div class="row">
<div class="col-lg-6 loginField">
data
</div>
<div class=" col-lg-6 loginField">
<div class="">
test
</div>
</div>
</div>
.loginField{
background-color:white;
}
so my problem is that i am getting 1 white line on desktop screen, but i want to make a 10 px space between those 2 columns without destroying responsive design. Right now if i switch to smaller screen it works, but on desctop there are no space, and if i add margin, this margin presist on smaller screens which is ugly.
P.S. when i say it works on smaller screens, i mean that those 2 columns move under each other and width of the white lines are as they shopuld be.
You simply need to mimic the same breakpoints in the responsive design as is in bootstrap.css:
http://jsfiddle.net/G6nWh/4/
CSS:
#media (min-width: 1200px) {
.margin-left-10 { margin-left: 10px; }
}
HTML:
<div class="col-lg-6 loginField">
<div class="margin-left-10">
test
</div>
</div>
If you have changed the breakpoints, you'll need to update that min-width, but this is the default min-width for Bootstrap's large columns.
When the screen gets smaller, the rule stops being applied, so it won't affect your smaller screens.

How can I turn a span9 into a span12 on smaller browser windows?

I have a layout as follows:
<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>
I would like the span9 div and the span3 div to both become span12 divs when the user is viewing the page on a tablet or mobile device, and I would like them to become vertically stacked above on another.
Can this be accomplished and if so how? My current solution relies upon a second set of divs which I show on small browser windows and I hide the above divs.
Using Bootstrap 3, this is super easy:
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
At typical desktop resolution (> 992px), the divs will be 9/12 columns & 3/12 columns. On anything smaller, they will be 12/12.
Twitter Bootstrap 3 grids
Using Bootstrap 2.3.2, you can add a media query:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.span9, .span3 {
display: block;
float: none;
width: 100%;
}
}

Twitter's Bootstrap mobile: more columns

Regarding twitter bootstrap, I currently have a design showing pictures in a grid
<div class="row-fluid">
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
....
</div>
This works quite well, showing 3 pictures in a row on desktop and tablet.
On mobile, they only show one under each other.
Do I have the possibility to show 2 columns next to each on mobile?
Thanks for your help
Below the 768 pixel width the (fluid) grid stack the elements. Add a media query below your bootstrap css include:
#media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } }
Note in your example code you use many span-4's in a row. The total span of a row should be max 12.
Cause you use a odd number of images, you will get the last row with one image 50%. To get images of different row together you will have to reset the display:table of your fluid row. Add an extra class to your rows like 'inline' and use the media query to reset like:
#media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } .inline:before,.inline:after {display: inline-block; content:none;} }
Example: http://bootply.com/62893
Twitter Bootstrap 3.0
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). (based on TB3 RC1)
For mobile you could use the “.col-” prefixes (tiny grid) but you still got the problem with the odd number of images in a row. To fix this you could try to add 24 for columns in a row instead of 12. Or use the same solution as above for TB2.
See: http://bootply.com/70644
In Twitter Bootstrap 3.0 there will be a grid for small devices too. You can use this by adding an extra class col-small-span-* to your divs. Note span-* is renamed to col-span-*. So you will get:
<div class="image col-span-4 col-small-span-6"><img src="//placehold.it/350x150">/div>
This will give you 3 (12/4) columns of 33% on the default grid and 2 (12/6) columns of 50% on the small grid. See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Resources