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
Related
I'm currently in the process of migrating from plain scss/sass to styled-components in my react site in progress!
However, I was wondering if there's any way to add top-level media queries (if that's the right way to describe them). Here's what I'm talking about:
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
&:hover {
width: 16rem;
.link-text {
display: inline;
}
.logo svg {
margin-left: 11rem;
}
.logo-text {
left: 0px;
}
}
}
}
As far as I can tell, I would need to add media queries inside each styled-component component with the styles that I would want to change. However, I feel that having queries like this would be more organized.
Is there any way to get media queries like this using styled-components? Any help would be massively appreciated!
I usually create a global style for media. There I put my top level media queries.
import { createGlobalStyle } from "styled-components";
export default createGlobalStyle`
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
#media(max-width: 800px) {
flex-direction: column;
position: relative;
}
`;
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%;
}
}
I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.
Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.
I was working on this site.Please check the link http://mrsinghcafe.com/real/
It has a slider on home page with text.In small resolutions the slider appears but without Text
I want text also to appear on small resolutions.
I tried adding the following to my css
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
but didn't help.Can some one please help me .Thanks.!!
The display:none; of the #div1content is responsible here:
#media only screen and (max-width: 767px) {
#div1content{ display:none;}
}
Remove it and position the text how you like it.
found this in your CSS:
#media only screen and (max-width: 767px) {
#slidecaption {
...
}
.slide_text {
display: none;
}
#slidecaption h2 {
...
}
}
.slide_text is display: none, and after this rule, no rule to set it to block again.
in slider_text_n_desription.css, you will find above rule. overrule it a bit down by adding display: block
#media only screen and (max-width: 479px) {
.slide_text {
bottom: 120px;
font-family: 'Eurostile-Normal';
font-size: 12px;
margin-left: 10%;
position: absolute;
display: block;
}
}
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
use semicolones
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; }
}