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%;
}
}
Related
I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:
http://jsfiddle.net/sm123456/d5Lvw1rs/
The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.
I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".
data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"
Any assistance would be very much appreciated!
After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.
For the 800px width one:
data-featherlight-variant="custom-class-800"
#media only screen and (max-width: 800px) {
.custom-class-800,
.custom-class-800 .featherlight-content{
width: 100%;
}
.custom-class-800 .featherlight-content .featherlight-inner {
margin: 0 auto;
}
}
For the 1350px width one:
data-featherlight-variant="custom-class-1350"
#media only screen and (max-width: 1350px) {
.custom-class-1350,
.custom-class-1350 .featherlight-content {
width: 100%;
margin: 0;
}
}
JS Fiddle
Hey #JimWids
Try to use that CSS:-
.featherlight-iframe .featherlight-content{
/* dimensions: 1140px prevents iframe from spanning the full width of the browser */
width: 80%;
max-width: 1140px;
/* spacing */
margin: 0;
padding: 0;
}
.featherlight-iframe .featherlight-inner{
/* positioning */
display: block;
float: left;
position: relative;
/* dimensions */
width: 100%;
}
.featherlight .featherlight-inner:after{
/* dimensions */
content: "";
float: left;
width: 80%;
height:80%;
padding-top: 57%;
display: block;
position: relative;
}
}
Here is that code:- JS_Fiddle
use this css
#media (max-width: 1024px){
.featherlight .featherlight-content {
width: 100%;
}
.featherlight .featherlight-image {
width: 100% !important;
object-fit: cover;
}
}
So basically what I'm trying to do is to set the container height to a specific number. So let me explain. I have an API that is returning Reports and the React JS renders them in this window (video Gyazo - MP4)
As you can see the page renders the height correctly for a maximum of 6 objects, If there are more than 6 I need to increase the container height. So basically I'm using styled-components, so I can pass in the value there to set the height.
My question is how to calculate it correctly?
Here's my styled-component CSS:
export const ReportContainer = styled.div`
height: 1100px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #010606;
#media screen and (max-width: 1000px) {
height: 2600px;
}
#media screen and (max-width: 563px) {
height: 2630px;
}
#media screen and (max-width: 410px) {
height: 2630px;
}
`;
So I made it by giving it an auto height and setting the minimum height to 900px;
height: auto;
min-height: 900px;
margin-top: 100px;
the task is to show different components based on the device width;
I've come up with two variants:
write a React Component which will take several components, on each width (sm, md, xl). It'll automatically check the device width and render only one component based on the width. (example)
<DeviceChecker>
<Desktop>
<List/>
</Desktop>
<Mobile>
<Carousel/>
</Mobile>
</DeviceChecker>
What I don't like in this approach is checking the width on window resize event.
Write both components in React but using CSS media queries show or hide each, like this:
<div>
<Carousel className="sm" />
<List className="md" />
</div>
what I don't like in this case is that React will actually render both components but one of them will be simple hidden
I know how to implement both variants, but the question is Which one is correct way to write Responsive Layouts for React Applications?
#media only screen and (min-width: 768px) {
section.dashboard .slick-list .slick-track {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
header .wrapper .article h1 span.arrow {
display:none;
}
header .wrapper .article .description {
max-height: 300px
}
}
#media only screen and (min-width: 1024px) {
.container header .wrapper {
text-align:left;
margin-left:5%;
width:480px;
}
.container header .header-nav-area #nav_container {
display:flex;
}
.container header form {
display:block;
}
.container header .menu-icon {
display:none;
}
header .wrapper .article footer {
display: block;
}
section.dashboard .slick-list .slick-track {
display: flex;
min-width: 309px;
padding: 20px;
}
section.dashboard .slick-list .slick-track[index="2"] {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
}
For more detail visit;
https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424
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.
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; }
}