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;
}
`;
Related
I am writing code in jsPsych (a JavaScript library) and am trying to display a + on my screen. The + has a maximum height of 85vh and a maximum width of 85vw, though it does not reach either because it is only 60px. However, even though the + fits its container, there is a scrollbar on it.
I do not understand why there are scrollbars. I am using overflow-y:auto, so the scrollbar should only appear if necessary. However, I know that it is unnecessary because displaying a box of 85vw x 85vh around the + shows that the + is less than these dimensions.
Please see my code snippet for a visual. Note that I am using jsPsych 6.3, which is not available online. Therefore, the JavaScript code in the snippet uses jsPsych 7.0, but the CSS code is from jsPsych 6.3. I think the scrollbar problem comes from the CSS 6.3 code, because it disappears when I replace CSS 6.3 with CSS 7.0.
Does anyone know why there is a scrollbar on my +?
const jsPsych = initJsPsych();
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div class="box">' +
'<div class="cross">+</div>' +
'</div>'
}
jsPsych.run([trial])
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
/* Container holding jsPsych content */
.jspsych-display-element {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.jspsych-display-element:focus {
outline: none;
}
.jspsych-content-wrapper {
display: flex;
margin: auto;
flex: 1 1 100%;
width: 100%;
}
.jspsych-content {
max-width: 95%;
/* this is mainly an IE 10-11 fix */
text-align: center;
margin: auto;
/* this is for overflowing content */
}
.jspsych-top {
align-items: flex-start;
}
.jspsych-middle {
align-items: center;
}
/* fonts and type */
.jspsych-display-element {
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 18px;
line-height: 1.6em;
}
/* PROJECT STARTS HERE */
.box {
border-style: solid;
width: 85vw;
height: 85vh;
}
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: auto;
}
<script src="https://unpkg.com/jspsych#7.0.0"></script>
<script src="https://unpkg.com/#jspsych/plugin-html-keyboard-response#1.0.0"></script>
Change your overflow-y to hidden. I see it in the snippet but not at full screen. Your container for your cross doesn't have any margins or padding applied so it's probably using browser defaults and causing it to touch the top of the container it's in just enough to create a scroll at a small enough screen size.
Edit: on the cross that is, sorry had the wrong class selected in the inspector
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: hidden;
}
I want the space between my black div and the navbar to remain the same when I resize the window. I thought of resizing the margin-top as the window gets smaller but I do not know how to get window's current size and use it in css.
Photos:
Full sized window
Minimized window
Question.css
.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;
}
Question.js
import React from 'react'
import './Question.css'
class Question extends React.Component {
render() {
return (
<div className='Question'>
applications of adaptive testing, starting with Binet in 1905. Adaptive tests are comprised of items
selected from a collection of items, known as an item bank. The items are chosen to match the
estimated ability level (or aptitude level, etc.) of the current test-taker. If the test-taker succeeds on
an item, a slightly more challenging item is presented next, and vice-versa.
</div>
)
}
}
export default Question;
NavBar.css
.NavBar {
background-color: #0B0C10;
position: fixed;
top: 0;
width: 100%;
border-bottom: 2px solid #C5C6C7;
color: #C5C6C7;
}
.Title {
margin-left: 5%;
}
NavBar.js
import React from 'react'
import './NavBar.css'
class NavBar extends React.Component {
render() {
return (
<div className='NavBar'>
<h3 className='Title'>CATlin</h3>
</div>
)
}
}
export default NavBar;
Thank you in advance!
.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;
}
#media screen and (max-width: 600px) {
.Question {
margin: 4% 5% 3% 5%;
}
}
Yes, you can. "vh" is percentage of your screen height. (Also, vw: percentage of your screen width.) Please, review and run my code and resize your screen height.
.container {
margin-top: 50vh;
height: 100vh;
width: 100vw;
background-color: #ecf0f1;
}
<div class="container"></div>
If you want something more smoothly you must do this without media queries using only vw and vh units.
.foo {
margin-top: 10vw; /* the margin top will be 10% of window width */
}
.bar {
margin-top: 10vh; /* the margin top will be 10% of window height */
}
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 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 am using responsive styling in a project that uses the fullcalendar.js.
Unfortunately, I can't get the style of the header (fc-header-left, fc-header-center, fc-header-right) to stack on each other when in mobile view.
For example... in desktop view it looks like...
fc-header-left fc-header-center fc-header-right
When mobile I would like the 3 parts of the header to stack on top of each other.
fc-header-left
fc-header-center
fc-header-right
I have tried to override these headers with negative margins, floats and all kinds of things but I can't get these headers to stack.
Does anyone know how I can get the header parts to stack on each other in mobile view?
Thanks
This worked for me with the newest version. Check done using screen width.
#media (max-width: 768px){
.fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
display: inline-block;
float: none !important;
}
}
For Fullcalendar v5
#media (max-width: 767.98px) {
.fc .fc-toolbar.fc-header-toolbar {
display: block;
text-align: center;
}
.fc-header-toolbar .fc-toolbar-chunk {
display: block;
}
}
Give each of them a width:100%; and display:block; that should do the trick.
At least I was able to get the demo one on teh fullcalendar.js website to do that.
You will then have to align them as you see fit.
.fc-header-left, fc-header-center, fc-header-right {
width: 100%;
display: block;
}
The version I am working with uses flexbox. This is what works for me,
.fc-toolbar {
.fc-center h2 {
font-size: 1.25em
}
display: block;
text-align: center;
#media (min-width: 600px) {
display: flex;
}
}