I am learning HTML & CSS from a video step-by-step. In the beginning, we should make a header.
But I don't why the code is not working the same.
The problem is the header must be full width but in my case, it's not. It only became full width when I remove "max-width: 100%" from the .col class
here is my code:
/* app.css */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body {
font-family: "Nunito Regulsr";
}
.content {
background-color: yellow;
width: 100%;
height: 100px;
}
/* grid.css */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
}
#media only screen and (min-width: 576px) {
.container {
max-width: 576px;
}
}
#media only screen and (min-width: 768px) {
.container {
max-width: 768px;
}
}
#media only screen and (min-width: 992px) {
.container {
max-width: 992px;
}
}
#media only screen and (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
max-width: 100% flex-grow: 1;
}
<div class="container">
<div class="row">
<div class="col">
<div class="content">text</div>
</div>
</div>
</div>
Related
HTML
<div class="container">
<div class="photos" id="box">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
CSS
.container {
max-width: 1280px;
margin: 0 auto;
}
.photos {
display: flex;
background-color: #000;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
padding: 0;
max-width: 1280px;
}
.photos img {
display: block;
float: left;
flex: 0 0 auto;
background-color: #fff;
width: calc(25%-120px);
/*
box-sizing: border-box;
border-right: 40px solid #FFFFFF;
*/
}
#media screen and (min-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 769px) and (max-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 481px) and (max-width: 768px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (max-width: 320px) {
.photos img {
width: 100%;
height: 100%;
}
}
How can I place a row of 4 square images that reduce into 2 rows of 2 square images using flexbox, with 40px between everything including the sides
Unable to get a 40px gap between images, messes with calc grid, not sure on how to easily create a grid with 40px gap between everything (including by the edges of the page)
I have a sidebar nav which collapses to make way for more content in a flex layout. When the user clicks to collapse the nav the content area div .ca expands to fill the space and the flex layout reflows using media queries.
See it in action here.
I have applied a CSS transition to each moving element but the .ca div jumps when the nav is opened and closed. This seems to be related to the widths of the units in the flex layout – .songgrid-unit.
The unit has a width value in px but the media queries set a min-width value in % to override this, so as to avoid large empty spaces between break points:
html:
<div class="navbar open ease">
<div class="nav-toggle">
<div class="nt-wrap">
<div class="nt-bar ease" id="ntb-top"></div>
<div class="nt-bar ease" id="ntb-bot"></div>
</div>
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
</div>
</div>
CSS:
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 0.4s ease-in 0s;
-webkit-backface-visibility: hidden;
}
jQuery:
$(".nav-toggle").click(function(){
$(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
If I remove the media queries the transitions work fine, but the min-width values are breaking the effect.
Why is this happening and how can I fix it? Thanks.
It's hard to tell because the code on the site you linked is a bit different from what you posted here. But it seems to me like the .ca div isn't actually jumping, it just looks like it is because as the items inside the grid change in size the number of items per row changes. The jump happens when the items either take up more space so that one fewer can fit in a row, or take up less space so one more can fit per row.
I played with the code you posted here a bit just to demonstrate what I think is happening. I hid the nav and added some outlines around the songgrid-container & individual songgrid items, and then I slowed down the transition a bit. So you can press the blue box and see what the transition looks like in slow motion. It looks like the widths are all transitioning fine, it just jumps when the layout inevitably changes.
Unfortunately I don't have a super easy solution to this, it's not really something you can control with a basic CSS transition. But maybe look at a library like this: https://isotope.metafizzy.co/
I don't actually think the media queries have anything to do with it, but I may also just be completely misunderstanding the effect you are seeing!
$(".nav-toggle").click(function(){
// $(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
left: -214px;
}
.nav-toggle {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
right: -50px;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
background: lightblue;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
outline: 2px solid blue;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255,255,255,.5);
outline: 2px solid gray;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 3s ease-in 0s;
-webkit-backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="navbar open ease">
<div class="nav-toggle">
click
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
</div>
</div>
</body>
</html>
With some help getting onto the right path from the reply from #sparrow here I've found that the transitions can be rendered much smoother by applying further flex properties to the items creating the columns in the grid.
Updating the CSS for the .songgrid-unit class as follows fixes the issue:
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-grow: 1; /*new line*/
flex-shrink: 1; /*new line*/
flex-basis: auto; /*new line*/
flex-direction: column;
justify-content: space-between;
}
With thanks to #sparrow and the authors over at this thread.
I have the following HTML (JSFiddle Example):
<header>
<div class="wrapper">
<p>Header Text</p>
</div>
</header>
<div class="intro">
<div class="frame">
<img src="https://via.placeholder.com/800x240">
</div>
<div class="inner">
<div class="wrapper">
<p>Body text</p>
</div>
</div>
</div>
Objectives
Body Text must be over the Image;
Body Text and Header Text must be left aligned.
The problem is when resizing the screen to a small size Body Text and Header Text are not aligned.
Wrapper class is responsible to keep a center aligned region, with width up to 1024px, where content is placed like "header text" and "body text" ...
How to solve this?
The CSS code is the following:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media screen and (max-width: 400px) {
.wrapper { padding: 0 40px;}
}
#media screen and (min-width: 401px) {
.wrapper {
margin: 0 auto;
width: 90%;
}
}
img {
height: auto;
max-width: 100%;
outline: 0;
width: 100%;
}
div.intro {
overflow: hidden;
position: relative;
}
#media screen and (max-width: 400px) {
div.frame {
margin: 0 -14rem;
}
div.frame {
margin: 0 -4rem;
}
}
div.inner {
max-width: 600px;
position: absolute;
top: 40px;
}
Try with this css code
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media screen {
.wrapper { padding: 0 40px;}
}
#media screen {
.wrapper {
width: 90%;
}
}
img {
height: auto;
max-width: 100%;
outline: 0;
width: 100%;
}
div.intro {
overflow: hidden;
position: relative;
}
#media screen and (max-width: 400px) {
div.frame {
margin: 0 -14rem;
}
div.frame {
margin: 0 -4rem;
}
}
div.inner {
max-width: 600px;
position: absolute;
top: 40px;
}
I want to place description under the photo from 768px up, but without white gap between them. Could someone help me.
I note that the HTML order cannot be changed. Eventually element's can be wrapped.
I tried flexbox and grid layout but with no success.
Below is the latest version of what I am trying to achieve.
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
}
.container div {
padding: 20px;
}
.container .name {
background: orange;
}
#media (min-width: 768px) {
.container .name {
flex-basis: 100%;
}
}
.container .photo {
background: yellow;
}
#media (min-width: 768px) {
.container .photo {
flex-basis: 50%;
padding: 100px 20px;
}
}
.container .price {
background: purple;
}
#media (min-width: 768px) {
.container .price {
flex-basis: 50%;
padding: 150px 20px;
}
}
.container .description {
background: blue;
flex-basis: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="name">name</div>
<div class="photo">photo</div>
<div class="price">price</div>
<div class="description">description</div>
</div>
</body>
</html>
You don't really need flexbox layout for that. A couple of good old-fashioned floats will do.
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.container {
position: relative;
}
}
.container div {
padding: 20px;
}
.container .name {
background: orange;
}
.container .photo {
background: yellow;
}
#media (min-width: 768px) {
.container .photo {
float: left;
width: 50%;
padding: 100px 20px;
}
}
.container .price {
background: purple;
}
#media (min-width: 768px) {
.container .price {
float: right;
width: 50%;
padding: 150px 20px;
}
}
.container .description {
background: blue;
}
#media (min-width: 768px) {
.container .description {
float: left;
clear: left;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="name">name</div>
<div class="photo">photo</div>
<div class="price">price</div>
<div class="description">description</div>
</div>
</body>
</html>
I am working on a site and I have two images that need to be inline when device width is more than 425px (min-width: 425px) but for some reason it does not seem to be working how it should be and my css with the #media but it doesn't work for some reason although it is fairly basic
CODE
.info-img {
width: 49.75%;
}
.info-images {
display: inline-block;
text-align: center;
}
#media screen and only (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
<img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
#import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>
The problem is because you are giving inline-block to parent instead of img, plus you are writing your media wrongly (its not #media screen and only, but #media only screen and).
Snippet
.info-images {
font-size: 0;
/* fix inline-block gap */
}
.info-img {
width: 50%;
display: inline-block;
vertical-align:top; /* may be necessary */
box-sizing: border-box;
padding: 0 1%
}
#media only screen and (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="//lorempixel.com/1600/900" class="info-img">
<img src="//lorempixel.com/1600/900" class="info-img">
</div>