How do i implement a fixed column grid in zurb foundation 3? Currently, foundation's grid is fluid and are based on percentages. I want to implement something similar to the bootstrap (non-fluid) grid whereby there are only 4 posibilites on how your grid is displayed (well at least until it drops down to mobile, which is fluid)
I want to keep the functionalities (and semantics) of the foundation grid so i dont want to simply swap it out for the bootstrap grid.
I know this goes against the theory of a pure "responsive" grid but dealing with real world clients and their demands has made me lean towards having a finite set of grid behaviours that are predictable (adaptive grid?)
You need to reset the columns and row widths in the CSS to fixed positions in an override #media declaration. For instance where you have
.row { width: 100%;}
.one, .row .one { width: 8.33333%; }
.two, .row .two { width: 16.66667%; }
.three, .row .three { width: 25%; }
you would now need,
#media screen and min-width(960px){
.row { width: 960px;}
.one, .row .one { width: 80px /* 960 x 8.33333% */ }
.two, .row .two { width: 160px; /* 960 x 8.33333% */}
.three, .row .three { width: 240px; /* 960 x 8.33333% */}
}
Below was the previous answer before the updated question.
Add a wrapper div around the page
<div class="wrapper">
<!-- Page content and styles go here -->
</div>
and then in your CSS you should include
.wrapper {
width: 98%;
max-width: 1200px;
}
In order to prevent row scaling you need to put the following into your app.css:
.row { max-width: none; }
This will make row width fixed for all viewports above 767px (767px is default mobile grid breakpoint).
In case you need your grid adjustable in several fixed steps try using media queries:
#media screen and (min-width: 768px) and (max-width: 940px) {
.row { width: 840px; }
}
#media screen and (min-width: 941px) and (max-width: 1050px) {
.row { width: 960px; }
}
Related
Here is the website I'm working on: https://frankli-n.github.io/portfolio/memsmosaics/filter/filterable-gallery/dist/m_index.html#gallery
The image section is responsive - as you narrow the window you get less image columns. The problem is these columns aren't centred. I want them to always be horizontally centred inside the window. This is particularly important for the aesthetics on the mobile view.
This must have something to do with how the <img> tags are being positioned in the <div id="gallery-content-center"> and it is complicated for me because the <img> tags have dynamically changing positioning with the transform property which allows them to jump columns when they are cut off.
style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 258px, 0px);
Here's a screenshot of the window at a width where the images are clearly not centered and the img tag (for the red top right picture) transform positioning is highlighted in the inspect.
Any help would be greatly appreciated!
Here how you should do considering your case:
#gallery-content-center {
margin: 0 auto;
width: 1240px;
float: none;
}
#media screen and (max-width: 1250px) {
#gallery-content-center {
width: 930px;
}
}
#media screen and (max-width: 960px) {
#gallery-content-center {
width: 620px;
}
}
#media screen and (max-width: 670px) {
#gallery-content-center {
width: 310px;
}
}
Suppose I have about 250 divs styled with class slider-item. I have a responsive grid in css A which wraps the divs as columns/items as the window scales. Minimum item width is 240px listed below.
https://streamable.com/l3ezfv
I'm trying to keep the grid responsive in a single row (nowrap with overflow horizontal). The problem is the property grid-template-columns: repeat(auto-fill..) grows/shrinks rows b/c the divs exceed the current window width
A
.slider-content {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
overflow: hidden;
margin: 20px 0;
scroll-behavior: smooth;
}
/* .slider-content > .slider-item {
min-height: 130px;
min-width: 240px;
} */
B
.slider-content {
display:grid;
grid-auto-flow:column;
grid-gap:10px;
margin:20px 0;
overflow:auto;
}
.slider-content > .slider-item {
min-height: 130px;
min-width: 240px;
}
Css B keeps the content in a single row with horizontal scroll, but the problem is its not responsive like css A
I need it later for a multiple column carousel.
Not interested in flexbox or slickjs; using css grid.
I think this achieves what you want:
.slider-content {
display: grid;
overflow-x: auto;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 1fr);
}
And don't forget to set a height on either .slider-content or .slider-item.
Update
I don't know how to disable CSS grid row wrapping. But, I found a way that works like on the video, but in one row with overflow. It is not the most elegant way, but works just fine. I didn't add all the media queries for up to 6 columns, but it is very easy to add them - just increment the media size up 240px, or whatever you want the minimal width to be, and change the grid-auto-columns value.
.slider-content {
/* Same as above, before update. */
}
#media (max-width: 479px) {
.slider-content {
grid-auto-columns: 100%;
}
}
#media (min-width: 480px) and (max-width: 719px) {
.slider-content {
grid-auto-columns: 50%;
}
}
#media (min-width: 720px) and (max-width: 959px) {
.slider-content {
grid-auto-columns: 33.3%;
}
}
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 2 years ago.
When I resize my window, I am wanting a row of divs of different sizes to cascade, however when I try with Flexbox I am getting vertical white space due to the differing sizes of the divs.
Is there any way in which I can remove this whitespace/specify how much there is between the divs?
Here is a link to my stackblitz
.content {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div {
width: 300px;
}
.red {
background: orangered;
height: 40px;
}
.green {
background: yellowgreen;
height: 150px;
}
.blue {
background: steelblue;
height: 150px;
}
/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
The problem is here is that you are setting a width of 300px to the colored children of content with
.content div {
width: 300px;
}
as the .content div has no width, it's the size of its parent, which is 100% of the screen width, . So, it will display as much divs as it can within its own width.
If you resize to something between 300px and 599px, you should have all your divs aligned as you wish.
What I think you'll want to use here is a media query that will set your .content div to flex-direction: column once screen width is inferior to the size you want. Let's say 900px, so once your three colored children don't all fit on the same line, they align vertically. You will also need to remove the flex-wrap: wrap that's forcing the elements to stay on the same line.
It would look something like this:
#media screen and (max-width: 900px) {
.content {
flex-direction: column;
flex-wrap: nowrap;
}
}
I used to use bootstrap '.responsive-table' class to add a horizontal scroll bar when screen size is less than 768px;
This is the bootstrap way of doing this, but it only intends to apply on tables.
.table-responsive {
#media screen and (max-width: #screen-xs-max) {
width: 100%;
margin-bottom: (#line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #table-border-color;
-webkit-overflow-scrolling: touch;
}
Let's say I have a div, or a <ul> tag,
<div class="foo" style="width:980px">
/*content here is 980px width*/
</div>
How to make the scroll bar appear on div.foo on a page with bootstrap loaded, when the screen size is smaller then 980px?
This css should help
div.foo {
min-width: 980px;
overflow: auto;
}
This will not let the width of div.foo go below 980px. It it goes then it will display a scrollbar.
I am trying to create 2 independently scrollable columns (left and right) using the Bootstrap 3 grid, which should dynamically change their height depending on the browser's windows size and are offset by a top-padding of 100px for a navigation bar. At the moment I have to set a fixed height (600px), which obviously doesn't scale very well on different screen sizes.
CSS:
.left {
height: 600px;
overflow: auto;
}
.right {
height: 600px;
overflow: auto;
}
HTML:
<div class="row">
<div class="col-md-9 left scrollable">
// Content Left Column
</div>
<div class="col-md-3 right scrollable">
// Content Right Column
</div>
</div>
I already tried to put them in a #testdiv and change its' height with a Javscript / jQuery solution, which doesn't seem to work:
$('#testdiv').height($(window).height() - 100)
Would appreciate your advise.
I think this is what you're looking to accomplish:
DEMO
This uses css calc to set the height of the two left/right columns to 100% of the window minus the height of your navigation bar (I used html5 <aside> but no reason you can't use div tags with classes if you prefer).
Don't forget, the height of an element is dependent upon the parent element having its height set. So, in this case, I set the html and body height 100% of the window height using 100vh. That will constrain the height of the entire page to the height of the window. If you wanted your main content to not have the independent scroll behavior (from overflow: auto), then set the html/body height to 100% instead.
Here's the core essence of the demo css/html:
CSS:
body, html {
height: 100vh;
margin: 0;
padding: 0;
}
nav {
background-color: palegreen;
height: 100px;
}
main, aside {
overflow: auto;
height: calc(100% - 100px);
float: left;
}
main {
width: 50%;
background-color: pink;
}
aside {
width: 25%;
background: #ccc;
}
HTML:
<nav>
Navigation
</nav>
<aside>
Left Aside
</aside>
<main>
Main Content
</main>
<aside>
Right Aside
</aside>
Use this in your CSS file :
#media only screen and (min-device-width: 1600px) and (max-device-width: 1700px) {
////your css codes
}
OR
#media only screen and (min-width: 1600px) and (max-width: 1700px) {
////your css codes
}
If your only goal is to scale down, use EMs instead of pixels, then change the font-size for smaller screens.
#media all and (min-width: 901px){ html{ font-size:100.00%;} }
#media all and (max-width: 875px) and (min-width: 851px){ html{ font-size: 98%;} }
#media all and (max-width: 850px) and (min-width: 826px){ html{ font-size: 96%;} }
etc....
.left {
height: 37.5em;
overflow: auto;
}
.right {
height: 37.5em;
overflow: auto;
}
If you really, really want to pin the height of an element to the browser window, you can probably just use fixed positioning.
.left, .right {
position: fixed;
top: 100px;
bottom: 0;
overflow: auto;
}
.left {
left: 0;
width: 200px;
}
.right {
left: 200px;
right: 0;
}
Here's a JSFiddle that demonstrates what that does. Of course, this doesn't look good at all on mobile devices.