Quick question involving foundation. If I want divs to go in order 1 then 2 on desktop and 2 then 1 on mobile, how would I accomplish this using Zurb?
<div class="row">
<div class="three columns">
</div>
<div class="nine columns">
</div>
</div>
Thanks so much for the help!
This can definitely be done. In your code you should order the div's based on how you would display it on the mobile, i.e. 2 then 1. For displaying it properly on larger screens you can override the default styling of the div's.
For testing purposes you can try:
<div class="row">
<div class="nine columns" style="float:right;">
</div>
<div class="three columns" style="float:left;">
</div>
</div>
While the above solution will work, I suggest not using inline styling. I would rather override using custom classes and/or #media tags.
Using those the code would be:
For the HTML:
<div class="row">
<div class="nine columns pull-right">
</div>
<div class="three columns pull-left">
</div>
</div>
For the CSS/Stylesheet:
#media only screen and (min-width: 768px) {
.pull-left {float: left !important;}
.pull-right {float: right !important;}
}
Not sure you can do this strictly with css, but with javascript you can add the pull-x classes when applicable.
theory:
Place the columns in the order you want for the mobile device, or small screens rather. Then in document.ready, check whether show-for-small is visibile or not, if not, you are on a larger screen and can apply push|pull classes to your columns of choice.
pseudo code, assuming you know push/pull technique:
// do this if not on small screen
if ( $('.show-on-small').css('display') == 'none' ) {
// pull or push the columns as needed
$('.myColumnsToPull-two').addClass('pull-two');
} else {
// might be a good idea to revert above change
}
Related
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I started to write a mobile version in css and I am asking you which is the better way:
In the html to write a div which has a class desktop and another div which has a class mobile. And build everthing from zero. For instance:
<div class="container-fluid bg-1 desktop1">
<div class="container">
<div class="col-xs-5 despre-noi-text first-section">
<h2>asdfsdfdf</h2>
<p class="despre-paragraph">
adsdadd
</p>
</div>
<div class="col-xs-7 despre-noi-img second-section"></div>
</div>
</div>
<div class="container-fluid mobile1">
<div class="container">
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-img"></div>
</div>
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-text">
<h2>asdfsdffdfsfsdf</h2>
<p class="mobile1-despre-paragraph">
asdfdfdfd
</p>
<p class="mobile1-despre-paragraph2">saddfsdfsdfsdfd</p>
</div>
</div>
</div>
</div>
And after that I will check with media queries on the mobile resolution which classes will be hidden and which will be not hidden.
#media only screen and (max-width : 480px) {
.desktop1 { display:none; }
.mobile1 { display:block; }
}
OR to overwrite all of the classes in media queries ?
Definitely use media queries to override the default properties. It's generally a good principle to keep your code DRY and easily maintainable. Having two versions of a block of HTML means unnecessary duplication (meaning more code needs to be loaded to the browser) and more work in future maintenance.
It's not a performance issue to use the queries to override the styles -- CSS is built to cascade. Don't feel bad about taking advantage of it (unless you're cascading with little reason and adding unnecessary specification).
Short answer: Save yourself the stress. Don't duplicate the HTML.
I'm trying to create a layout in Bootstrap that shows three blocks on a larger screen and two blocks on a smaller screen (the breakpoint occurs between sm and md).
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4">B - 100</div>
<div class="col-xs-6 col-md-4">C - 75</div>
</div>
</div>
See CodePen example
This however results in an unwanted vertical gap between block A and C.
As I see it I have a few possible options to remove the vertical gap, but perhaps there is a better solution:
Duplicate the html and use visible-sm and visible-md to show the wanted layout. On sm it would have a two column layout with the first column containing both A and C.
Disadvantage: The block content also needs to get duplicated, which might contain a lot of html
Use JavaScript to move the block to the correct column (perhaps jQuery Masonry).
Disadvantage: I would rather have a CSS only solution
Take a look at flexbox, css columns and css grid.
Disadvantage: Browser support isn't there
Imperfect untested solution at http://codepen.io/elliz/pen/fvpLl. Key points:
At small widths
break B out of flow
make container smaller
HTML
<div class="container">
<!-- note: sm -> container 50% -->
<div class="row col-xs-6 col-md-12">
<!-- note: sm -> div = 100% of container which is 50% -->
<div class="col-xs-12 col-md-4 h50">A - 50</div>
<div class="col-xs-12 col-md-4 h100">B - 100</div>
<div class="col-xs-12 col-md-4 h75">C - 75</div>
</div>
</div>
CSS Fragment
/* xs and sm */
#media ( max-width: 991px) {
.h100 {
position: absolute !important; /* better to do with specificity, but quick ugly hack */
margin-left:93%;
}
}
Spacing is not perfect, but gives you a starting point for your experiments.
Note: this can be implemented using FlexBox and Grid (when it is ready) far easier - and the latest alpha version of Bootstrap does support flexbox.
I realize you said you'd prefer a css only solution, but in my opinion what you are trying to accomplish is not what the bootstrap devs had in mind when they designed their grid system. I would use javascript to stick that sucker where you need it:
jQuery/html/css solution
I changed your columns to be containers (I called em buckets)
HTML
<div class="row">
<div class="container">
<div id="leftBucket" class="col-xs-6 col-md-4">
<div id="A" class="h50">A - 50</div>
</div>
<div id="middleBucket" class="col-xs-6 col-md-4">
<div id="B" class="h100">B - 100</div>
</div>
<div id="rightBucket" class="hidden-sm col-md-4">
<div id="C" class="h75">C - 75</div>
</div>
</div>
</div>
<div id="hiddenDiv"></div>
Then I "borrowed" an approach to watching for media queries from the link in the comment below
JS
// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){
if ($("#hiddenDiv").css("float") == "none" ){
// small screen!
$('#C').appendTo('#leftBucket');
} else {
//not a small screen :P
$('#C').appendTo('#rightBucket');
}
});
And added some rules for the hidden div (that I use to watch screen width)
CSS
#hiddenDiv {float:left;}
#media only screen and (max-width: 992px){
#hiddenDiv {float:none;}
}
ps. it's good to see people using hand drawn doodles to get their ideas across, that's how I like to break it down for people also :D
I found a clever way of doing this. Rearrange the order. Put C before B and then use push and pull to swap the order
<div class="row">
<div class="container">
<div class="col-xs-6 col-md-4">A - 50</div>
<div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
<div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
</div>
</div>
I have created a fiddle with a wrapping div added with a fixed width.
For 320 screen size, reduced the wrapper width and also changed float of the B div to float: right
Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/
I was able to do the Source Ordering using push and pull method. But what the whole right column comes on top of the left column. What i want to achieve is shown in the attached screenshot. Please guide me if there is a work around where i want the order after a 768px breakpoint
If there is a knonwn height on large-4 , you could use a floatting method and a pseudo element, to push dow the first element in order to leave room for second element.
DEMO:
#media only screen and (max-width: 767px) {
.row:before {
content:'';
float:right;
height:1.2em;
width:0;
margin-left:-0.25em;
}
.large-8 {
clear:right;
float:right;
}
.large-4 {
float:none!important;
}
}
You have the natural flex method if you do not mind leaving aside older browsers: DEMO
#media only screen and (max-width: 767px) {
.row{
display:flex;
flex-direction:column;
}
.large-8 {
order:2;
}
}
Add push/pull classes to reorder the source: http://foundation.zurb.com/docs/components/grid.html? Look under source ordering, in that section there is a good example for what you want to do.
Check the foundation documentation
You should read about source ordering.
Source Ordering
Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.
Example:
<div class="row">
<div class="small-10 small-push-2 columns">10</div>
<div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
<div class="large-9 large-push-3 columns">9</div>
<div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
<div class="large-8 large-push-4 columns">8</div>
<div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
<div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
<div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
<div class="medium-6 medium-push-6 columns">6</div>
<div class="medium-6 medium-pull-6 columns">6, last</div>
</div>
Try it in your code, you will see, that columns with "last" named comes first.
i am using zurb foundation for building website, but now i am facing a problem as follows
There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case,
I know, i am missing small point, but cant get it
here is the image of problem
I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none
The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.
What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.
However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use
#media queries in the stylesheet to specify where and when.
Examples:
#media (query goes here) {
.row .columns:last-child {
float: left;
}
}
** OR **
.left {
float: left !important;
}
THEN
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns left">4 ... </div>
</div>
Try this fiddle
HTML
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
CSS
div.columns
{
padding:10px;
background:#00bfff;
width:20%;
display:block;
float:left;
}
#jnelson thanks for the help, now i realized the power of !important, so i have created simple solution
.abc{
float:left !important;
}
This also worked correctly on all type of devices
You should not be changing the fundamental structure of how the columns are sized or work.
Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).
If you absolutely have to use 3 columns I agree with the above posts that you need to change.
[class*="column"]+[class*="column"]:last-child {
float: right;
to
[class*="column"]+[class*="column"]:last-child {
float: left;