I'm trying to specify specific display tag according to width of the page. Typically, it is of flex but less than 437px I want to specify the property as grid.
Css,
.test {
display: flex;
justify-content: flex-end;
margin-right: 1%;
}
#media all /*and (min-width:960px) and*/ (max-width: 437px) {
/* put your css styles in here */
.test {
display: grid;
}
}
you removed a little to much with your commenting. The "and" is missing.
it has to be:
.test {
display: flex;
justify-content: flex-end;
margin-right: 1%;
}
#media all /*and (min-width:960px) */ and (max-width: 437px) {
/* put your css styles in here */
.test {
display: grid;
}
}
<div class="test">test</div>
Related
I've been trying to make a few layouts for specific sizes.
As shown in the picture above, I tried to create two layouts, PC and mobile.
Making a PC was easy. SectionA and SectionB were configured through the flex layout, and SectionC was configured below it.
The problem was with Mobile. SectionA and SectionB are tied together in a flex layout, so I couldn't think of a way to put SectionC between A and B.
This is because, in the html structure, sectionC already exists below. Is it possible to configure only with CSS without using Javascript?
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
/*only for ilustration*/
background-color: #d7d7d7;
}
.bottom {
display: flex;
flex-direction: row;
/*only for ilustration*/
background-color: #ffd5d5;
}
#media screen and (max-width: 760px) {
.header {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.bottom {
flex-direction: column;
border: none;
}
}
<div>
<div class="header">
<div>
SectionA
</div>
<div>
SectionB
</div>
</div>
<div class="bottom">
SectionC
</div>
</div>
I have just made a change in your HTML.
So I wrapped all div inside of .header.
Then, to give 50% width for first to direct child I have just added class .hlalf and set this class CSS to flex:1 0 50%, which means take 50% width of flexbox.
Now to achieve bottom div in center in responsive we use order property of flexbox. and for that I have just added class to all 3 div according to their order. I have used sm keyword just for understanding as small screens.
#media screen and (max-width: 560px) {
.order-sm-1 {
order: 1;
}
.order-sm-2 {
order: 2;
}
.order-sm-3 {
order: 3;
}
}
.header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.header>div {
flex: 1;
}
.header>div.half {
/*This css tells all the direct div of header class to take 50% of the space*/
flex: 1 0 50%;
}
.bggreen {
background: green;
}
.bgblue {
background: blue;
}
.bottom {
background-color: #ffd5d5;
}
#media screen and (max-width: 760px) {
/*This will change flex-direction to column which is by default row*/
.header {
flex-direction: column;
}
.order-sm-1 {
order: 1;
}
.order-sm-2 {
order: 2;
}
.order-sm-3 {
order: 3;
}
}
<div>
<div class="header">
<div class="bggreen half order-sm-1">
SectionA
</div>
<div class="bgblue half order-sm-3">
SectionB
</div>
<div class="bottom order-sm-2">
SectionC
</div>
</div>
You can wrap all your section in a flex container and play with the flex-order properties
I'm late to the party with this one but Grid's the way to go in my opinion as you get complete control over where you put items. It's much more versatile than flexbox but it is a steep learning curve initially as there are so many options. Kevin Powell has a good introductory video to grid and this is also a good, clearly-written resource from css tricks.
.container {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-areas: "a b" "c c";
border: 2px solid #285DBB;
row-gap: 0.25rem;
column-gap: 2rem;
padding: 0.35rem;
}
.container>div {
background-color: #92D050;
color: white;
display: grid;
place-content: center;
padding: 0.75rem 2rem;
}
.zoneA {
grid-area: a;
text-decoration: underline wavy red;
}
.zoneB {
grid-area: b;
}
.zoneC {
grid-area: c;
}
.footer {
margin-top: 1.5rem;
font-size: 1.25rem;
text-align: center;
}
.mobile {
display: none;
}
.pc {
display: block;
}
#media only screen and (max-width:760px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 3fr 1fr;
grid-template-areas: "a" "c" "b";
}
.mobile {
display: block;
}
.pc {
display: none;
}
.zoneB {
text-decoration: underline wavy red;
}
.zoneC {
text-decoration: underline wavy red;
}
}
<div class="container">
<div class="zoneA">
SectionA
</div>
<div class="zoneB">
SectionB
</div>
<div class="zoneC">
SectionC
</div>
</div>
<div class="pc footer">PC</div>
<div class="mobile footer">Mobile</div>
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
I am only beginning CSS and HTML so this is definitely a beginner question here. Below is a snippet of my current work:
/* Setup */
* {
box-sizing: border-box; /* Makes like box model work like I'd expect */
}
body {
font-family: 'Roboto', sans-serif;
}
/* Necessary Selectors */
#header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
align-items: end;
}
.logo {
font-family: 'Rampart One', cursive;
font-size: x-large;
}
#header-img {
height: 25px;
}
#nav-bar {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 25px;
}
/* Media Query to change display based on screen width */
#media (max-width: 500px){
#nav-bar {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-items: center;
}
#header {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-content: center;
align-items: center;
}
}
The issue I am having is that in almost every ID Selector, I have to add display: grid. I am using grid as my main display, so I would like to not retype this. I've tried putting it in * and body selector, but this doesn't work as I expected. * breaks the webpage, and my selectors don't appear to inherit the display from body. Is there a better way?
Option 1 (recommended): Add a class to both #header and #nav-bar:
<header id="header" class="grid"></div>
<nav id="nav-bar" class="grid" aria-label="main navigation"></nav>
And then access the class in the CSS:
.grid {
display: grid;
}
Option 2: Use a comma to combine your CSS selectors:
#header,
#nav-bar {
display: grid;
}
I am currently creating some pages as part of the Free Code Camp CSS challenges.
For some reason my tags are not properly centering once I collapse the grid upon the #media activation. They keep slightly drifting to the right side.
The link for the complete pen is here:
https://codepen.io/alioshr/pen/KKPBPMr
I have already tried using inline-block display, justify-self to center, etc.
<html>
<header id="header">
<figure>
<img id="header-img"src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
</figure>
<div>
<h1>Doce Meliponicultura</h1>
<p>Reconnect with Mother-nature</p>
</div>
<nav id="nav-bar">
<ul>
<li>Top Features</li>
<li>Products</li>
<li>Social</li>
</ul>
</nav>
</header>
</html>
<style>
a {text-decoration: none; display: inline-block;}
#header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
background: gold;
align-items: center;
justify-self: center;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 99;
}
#media (max-width: 600px) {
#header {grid-template-areas: "title" "logo" "nav-bar";}
#header > figure {grid-area: logo;}
#header > div {grid-area: title;}
#header > nav {grid-area: nav-bar;}
}
#header > figure {
justify-self: start;
align-self: center;
display: relative;
max-height: 140px;
}
#media (max-width: 600px) {
#header > figure {
justify-self: center;
}
}
#header > nav {
justify-self: end;
}
#media (max-width: 600px) {
#header > nav {
justify-self: center;
}
}
</style>
You can add below CSS in your #media (max-width: 600px)
#header > nav > ul{
padding: 0px;
}
It will fix your issue.
I'll add my answer as well, to give a bit more info about Flexbox set up. Basically I removed all the CSS Grid syntax in favor of Flexbox. I'm not sure what exactly you're going for, but this will give you an idea of how to get it working at a minimum.
#header {
display: flex;
background: gold;
align-items: center;
justify-content: space-around;
width: 100%;
}
#media (max-width: 600px) {
#header {
flex-direction: column;
}
}
#header>figure {
justify-self: flex-start;
align-self: center;
max-height: 140px;
}
#media (max-width: 600px) {
#header>figure {
justify-self: center;
}
}
#header>nav {
justify-self: flex-end;
}
#media (max-width: 600px) {
#header>nav {
justify-self: center;
}
}
Here is my working fiddle (the codepen link you supplied never loaded for me).
Here is a really great resource on learning what all the Flexbox rules do, etc
A Complete Guide to Flexbox
I am trying to apply media queries to my website, however nothing is changing.
I have tried changing the position of my media query in the CSS flow, but no joy.
here is the specific part of the code:
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
I would like to replace the desktop header with a simplified mobile header that just displays images rather than the text. Currently, nothing is changing at all. Everything seems sound in the html, so I can only think I am leaving something out of the CSS?
Thank you for your help in advance!
I found nothing wrong with your code. It's absolutely fine! May be there are other conflicting code that bars your code from displaying as you intended.
Here I added some HTML and it's working fine with your code.
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
<div class="desktop-header">
<h1>Desktop Header</h1>
</div>
<div class="mobile-header">
<h1>Mobile Header</h1>
</div>
use these media queries and follow at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
I've got a form with a couple areas to it and I've been trying to figure out how to get flexbox to lay something out like this:
If possible, how could I do this while using the least amount of parent containers? (Or, why might I not want to do that?)
Stumped enough by not having achieved this that I think asking is the right move. Still wrapping my head around it all.
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}
<div class="wrapper">
<header class="header">Header</header>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
Modified from an example found here. Full credit to css-tricks.
Edit: highly recommend that css-tricks article. Very helpful resource for all things flexbox
you can build this layout from body with a few CSS lines:
html,
body {
height: 100%;/* or 100vw just for body */
margin:0 /* reset */
}
body,
section {
display: flex;
}
/* eventually : section {overflow:auto} if you want to keep footer down the screen no matter how much content */
body {
flex-flow: column;
}
section,
article {
flex: 1;/* use whole space avalaible if only child or share it evenly when multiple children */
}
/* add borders to see elements */
header,
footer,
article {
border: solid;
padding: 1em;
}
/* break point without mediaqueries ?
uncomment this below */
/* article {
min-width:320px;/* 2 articles make break point at average 640px */
}*/
<header>
header any height
</header>
<section>
<article>Side</article>
<article>Side</article>
</section>
<footer>
footer any height
</footer>
http://codepen.io/gc-nomade/pen/WGazGX to play with (or download code samples)