I try to create a media gallery in my angular app
I would like to create a responsive gallery which respect these rules :
every media will be 200px width
The items will wrap inside the container
Have a fixed media number per row before wrapping no matter the resolution of the screen
I mean having a flex container with wrap but having an overflow-x at the same time if resolution needs it
Is it possible to combine overflow-x with flex-wrap ?
Here is a codepen of my try, each item have min width of 200px and flex-basis of 25% to fit 4 in a row
.wrapper {
background: #456173;
display: flex;
justify-content: center;
gap: 1rem;
padding: 1rem;
width:500px;
flex-wrap: wrap;
overflow-x:auto;
}
.cards-content {
align-items: center;
background: #fff;
border-radius: 1rem;
color: #111;
display: flex;
font-weight: 900;
justify-content: center;
flex-basis: 25%;
min-width:200px;
}
https://codepen.io/Eytan20/pen/bGxdRYv
Your Wrapper has an absolute width of 500px, thats why it is not responsive. You can use media-queries to add styling only for mobile for example and set the width to 100%.
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 425px) {
.wrapper {
width: 100%;
}
}
Related
what is right settings when using max-width vs min-width
max-width(99px) and min-width(100px) (what about 1px between then ?)
or
max-width(100px) and min-width(100px) (which will be applied for 100px here ? )
If you're going to use media-queries on a specific element and target both max and min-width, you should use the same pixel value for each. For example, the min-width: 800px specify the styles when over 800px in screen width. max-width: 800px specifies the style changes on 800px and below. Using the same value for both queries insures that the specified styles are executed.
So in your example, the 1px between won't be a factor because there are no pixels between 99 and 100px and you have styles specified for both. If you used 798px instead of 799 there would be 1px where the element defaults to the non-media styles (if any).
Note: the max-width styles will prioritize over the min-width styles if using the same value when at 800px.
#media only screen and (min-width: 800px) {
img {
width: 100vw;
height: 100vh;
}
}
#media only screen and (max-width: 800px) {
img {
width: 50vw;
height: 50vw;
}
.img {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
}
<div class="img">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
I'm making web app using React where I fetch data from an API and display it on the page. I'm a beginner in responsive web design so I was trying media queries out. So for the mobile view i.e min-width: 320px, I wanted a div to have display:flex and I had assigned the rows and columns to its child components and everything looked fine. But when I tried viewing it in the desktop mode, it still remained a flex container. I tried explicitly calling a media query for desktop and assigned display to block, still no change.
#media only screen and (min-width:320px){
.form{
grid-template-rows: auto 1fr auto;
align-items: center;
}
.input{
margin-top: 1rem;
margin-bottom: 1rem;
}
.movie-card{
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
margin-bottom: 2rem;
background-color: white;
color: black;
display: flex;
flex-direction: column;
}
.movie-top{
display: flex;
flex-direction: row;
word-wrap: break-word;
}
.movie-top-left{
display: flex;
flex-direction: column;
}
.movie-top img{
width:150px;
border-radius: 10px;
}
.card--title{
margin-bottom: 0.5rem;
font-size: 2rem;
}
}
This is the media query for the mobile view, for the desktop I don't want the movie-card to be a flex container, but by inspect element shows that it is a flex container it looks different too
You have used min width in media query this means that everything that is bigger then 320px will be assigned that css. Use max-width
Use the max-width operation instead of min-width. This will ensure that the devices having width lesser than 320px will have some specified stylings like you have declared, while the others will have the browser default stylings if no other CSS is specified or the other CSS if specified.
I am adding 3 columns that are 400px wide max and adding space between them using space-between.
.wrap {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: space-between;
}
.item {
width: 100%;
max-width: 400px;
}
When I make the screen size smaller, the items are not responsive. They just collapse below each other. If I remove flex-wrap I start getting more than 3 columns per row and they are below 400px.
How can I get 3 responsive columns with space between in flex?
Percent for the width can't be used because the space between items has to look the same at any screen size.
You should drop width: 100% if you do not want them to occupy the whole width of the parent. And since you are using flex on the parent, you might as well use flex properties on the children and have these:
.item {
flex-basis: 33%; /* <-- Added in lieu of the width */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
If you only have those 3 children in the parent, then you could also do this:
.item {
flex-grow: 1; /* <-- Lets them grow equally */
flex-shrink: 1; /* <-- Lets them shrink equally. OPTIONAL as 1 is the default */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
The shorthand for the last one is this:
.item {
flex: 1; /* <-- Lets them grow/shrink equally */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
Also, if you only have those 3 children in the parent, you may want to remove flex-wrap: wrap; from .wrapper if you do not want the children elements to wrap. It will not happen in this case, since the children have percentage widths which add up to 100%. But it could be confusing and it contradicts with your intent.
If you want three columns, change the width property to 33% in your .item declaration instead of 100%.
JSFiddle example
Currently, all your "columns" are fighting to be 100% of the parent node. Here's a great explanation of using css flex from css-tricks.com.
I'm trying to make a chat layout. So i have 3 divs, activeUSer - top, messages middle (has to fill the space between 1 and 3), actions - bottom
Now, I've put flex-direction row. and it works fine. I needed the bottom div to grow if the input grows (if you have 2 or more lines of writing)
It worked ok untill I added display:flex to the Actions div (bottom). I needed another flex layout for input and buttons. Now it does not care for the padding i've set on the last div
Here is my codepen https://codepen.io/capraruioan/pen/XKWxrV
#content {
height: 300px;
display: flex;
flex-direction: column;
}
.activeUser {
height: 66px;
background-color: yellow;
}
.Messages {
flex: 1 1 100%;
}
.Actions {
flex-grow: 1;
display: flex;
padding-top: 2px;
padding-bottom: 20px;
}
.aa { //the inputbox
border: 1px solid black;
min-height: 10px
}
fixed it by letting display default on the 3rd div and placing a div with display flex inside
Okay, this is difficult to explain. If you look at the sample I put up at http://granthoneymoon.com/temp3.html you can see 4 nav buttons to the right of the logo.
What I want is for the nav buttons to be evenly spread among the space to the right of the logo, and as the browser window gets smaller the buttons get closer together. But, at a certain point, once the browser gets so small that the buttons would overlap it would push the whole menu underneath the logo.
Right now I have the buttons inline to the right of the logo, but as the browser gets smaller it just pushes one button at a time to the next line instead of the buttons getting closer together.
Is there a way to do this?
scale the buttons reponsively: e.g.
img.button{
width:17%
height :auto;
}
Add this code to the bottom of you CSS Sheet
Using #CSS Media Tags it will change the #header ID to max-width of 627px when the screen reaches width: 1077px
//CSS
#media screen and (max-width: 1077px) {
#header{
max-width: 627px;
}
}
This is one of the problems Flexbox was created to solve.
Here is a good resource to get started:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The gotcha with Flexbox is that because it’s new browser support is somewhat limited. See which browsers can use it here:
http://caniuse.com/#search=flexbox
I added comments below to explain what each line is doing. Let me know if you have any questions!
/* on all elements, reset any browser
added default margin and padding */
* { margin:0; padding:0 }
body {
/* make it pretty */
font-family: 'Palatino', serif;
font-style: italic;
}
header {
/* set flex-parent, makes direct
children flex-children */
display: -webkit-flex;
display: flex;
/* direct childen of the header
should wrap */
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/* make it pretty */
background: darkblue;
}
header #logo {
/* as a flex child, grow and
shrink as needed, use base-width
of 200px */
-webkit-flex: 1 1 200px;
flex: 1 1 200px;
/* set logo height */
height: 70px;
/* make it pretty */
background: lightgrey;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the :before)
should be vertically centered inside of logo */
-webkit-align-items: center;
align-items: center;
/* direct childen (in this case, the :before)
should be horizontally centered inside of logo */
-webkit-justify-content: center;
justify-content: center;
}
header #logo:before {
/* add descriptive text to this box */
content: 'Logo';
}
header nav {
/* as a flex child, grow and shrink as needed,
use current width as base width */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
/* change padding not to add to overall width */
box-sizing: border-box;
/* set left and right padding to 10% of
available space */
padding: 0 10%;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the links)
should be vertically centered inside of this element */
-webkit-align-items: center;
align-items: center;
/* direct childen (in this case, the links)
should be horizontally centered inside of this element */
-webkit-justify-content: space-around;
justify-content: space-around;
}
header nav a {
/* as a flex child, never ever grow and shrink,
use curremt width as base width */
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
/* change padding not to add to overall width */
box-sizing: border-box;
/* hard code width and height */
width: 50px;
height: 50px;
/* add 10px of margin to top, right, bottom, and left */
margin: 10px;
/* make it pretty */
background: linear-gradient(cyan, blue);
border-radius: 10%;
border: 1px solid lightgrey;
color: white;
text-decoration: none;
text-align: center;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the link text)
should be vertically centered inside of this element */
-webkit-align-items: center;
align-items: center;
}
<header>
<figure id="logo"></figure>
<nav>
Link One
Link Two
Link Three
Link Four
</nav>
</header>
Editable Demo: http://jsbin.com/zavawudaye/3