I have two divs lined next to each other using the following CSS:
.overlay {
display: flex;
flex-wrap: wrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
When the width of the screen gets too small (i.e. .interactions can no longer fit) a new row is created in which interactions are placed.
What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
#media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
maybe you should use media queries?
#media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
#media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
Related
I'm new, and I want to learn how can I create these images to be in the center of the page and I want to be a very small gap between them? May you please help me? I was searching on the internet about how can I create this, but unfortunately I wasn't very lucky. What's the code for this container, row, or column?
Image
Is this what you want? You wrap the two images inside a div container and apply flex property to it. Then use a padding of 5px on each image to get that little space between. Also I have used a custom height to the container, you can adjust it according to your need.
.container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
.container > div {
padding: 0px 5px;
max-width: 90%;
height: 325px;
}
.container div img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 780px) {
.container {
flex-direction: column;
}
.container > div {
padding: 10px 5px;
}
}
<div class="container">
<div><img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ"/></div>
<div><img src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"/></div>
</div>
On large screens i want all elements on 1 row, on smaller i want three rows. Basically i dont want see button only with H1 on same row. How can flexbox solve this issue? thank you :)
<div class="buttoncontainer">
<button class="change">Change background</button>
<h1 id="currentcolor">currentcolor</h1>
<button class="change">Change background</button>
</div>
And css:
'''
.buttoncontainer {
display: flex;
flex-wrap: wrap;
height: 90vh;
justify-content: flex-start;
}
button {
border: 10px solid black;
font-size: xx-large;
text-shadow: #222;
box-shadow: 10vh;
margin: auto;
text-align: center;
line-height: 4.5;
height: 25%;
flex-wrap: wrap;
border-radius: 20px;
}
h1 {
border: 10px solid black;
margin: auto;
}
SO i dont want this :Bad one
But straight to thisGOod one
So the easiest way to solve this problem would be through Media Queries. Media queries make it so you can easily set a max or min width for things to happen a certain way.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
From what I'm understanding, you can set it so whenever it's less than a certain resolution (in this case I set 900px), the flex-direction property should be set to 'column'.
#media (max-width: 900px) {
.buttoncontainer {
flex-direction: column;
}
}
This should solve your problem.
I have a div element and I want my image within it to scale to the full width of the parent however for some reason its not taking up the full width. I could use object-fit: cover; but I don't want to crop the image I want it to fill up the space of the parent. Id also like to scale it so it remains a square the whole time so it always scales as an equal square. I am a little confused as to why its not taking up the parents container. It seems to be wanting to keep its aspect ratio but I want it to stretch to the parent container both via its height and width properties.
html:
import React from 'react';
const ThreeGridTeaser = (props) => {
return (
<div className="specific-offer-container mt-0">
<div className="three-grid-teaser-wrapper">
<div className="three-grid-teaser-container">
{props.gridData.map((item, index) => (
<div key={index} className="three-grid-teaser-block">
<div className="three-grid-image-container hidden">
<img src={item.image}
/>
</div>
<div className="product-text-container hidden">
<ul>
<li className="product-title">{item.title}</li>
<li className="product-description">{item.description}</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
)
}
export default ThreeGridTeaser;
SASS:
.three-grid-teaser-wrapper {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.three-grid-teaser-container {
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
display: flex;
grid-gap: 20px;
gap: 20px;
#media (max-width: 1199.98px) {
gap: 25px;
}
#media (max-width: 767.98px) {
width: 100%;
}
}
.three-grid-teaser-block {
display: flex;
width: 32%;
height: fit-content;
#media (max-width: 1199.98px) {
width: 48%;
}
#media (max-width: 767.98px) {
width:47%;
}
justify-content: center;
flex-direction: column;
}
.hover-text-underline {
text-decoration: underline;
text-underline-position: under;
}
.three-grid-image-container {
height: 300px;
#media (max-width: 1199.98px) {
height: 350px;
}
#media (max-width: 767.98px) {
height: 180px;
}
width: 100%;
max-width: 100%;
img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
}
.product-text-container {
ul {
margin-top: 10px;
padding: 0;
li:last-child {
padding-top: 5px;
}
li {
list-style: none;
}
}
}
.product-title {
font-family: $terminaDemi;
font-size: 12px;
#media (max-width: 767.98px) {
font-size: 8px;
}
}
.product-description {
font-family: $Montserrat;
font-size: 18px;
#media (max-width: 767.98px) {
font-size: 12px;
}
}
This is because the image has reached its maximum height in relation to the div. I mean, an image 300px wide and 400px high inside a 400px square div, in this case if you put a width of 100% in the image, the maximum that it will reach in its width is 300px, in the case of you don't want to resize it.
Demonstração
Update
'object-fit: contain' makes the image fit in the space it has proportionally available, if you want it to maintain its proportion and fill the entire space, use the 'object-fit: cover'
look at this
https://jsfiddle.net/gxnvuq6s/8/
have you tried looking at the background-size: cover; style? you can then also position your image with background-position: center center;
I am using styled components to style my react project, components are working fine, but for some reason media queries are not applied. Here's a snippet that works when using regular css:
import styled from 'styled-components';
export const Block = styled.div `
margin: 20px;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-self: center;
background-color: #DAD870;
flex: 1;
min-width: 200px;
height: auto;
transition-duration: 1s;
font-family: sans-serif;
&:hover {
transform: scale(1.1);
}
#media (max-width: 1024px) {
width: 42%;
min-width: 158px;
}
#media (max-width: 480px) {
width: 40%;
min-width: 148px;
}
`;
I don't really use react but it looks like you are trying to use #media inside of an element, I don't think that works, instead try something like:
div{
min-width: 200px;
}
#media (max-width: 1024px) {
div{
width: 42%;
min-width: 158px;
}
}
#media (max-width: 480px) {
div{
width: 40%;
min-width: 148px;
}
}
I don't know how to show you like the way you did it but basically you need to declare it separately, hope it helped.
I'm using Phillip Walton's 'solved-by-flexbox' sticky footer solution for my site.
In addition to this, I have some video pages on which I want to centre the video embed (video-container) in the viewport (both horizontally and vertically)
Below is everything as it is set-up, and Here's a JSFiddle just for good measure.
.Site {
display: flex;
flex-direction: column;
height: 100vh;
/* 1, 3 */
}
.Site-content {
flex: 1 0 auto;
/* 2 */
padding: var(--space) var(--space) 0;
width: 100vw;
}
.Site-header,
.Site-footer {
flex: none;
/* 2 */
}
.Site-header {
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.video-container {
position: relative;
width: 70vw;
height: calc(70vw * 9 / 16);
margin-left: auto;
margin-right: auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<body class="Site">
<div class="Site-header">This is a header</div>
<div class="Site-content">
<div class="video-container">
<iframe src="https://player.vimeo.com/video/100978843" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="Site-footer">This is the footer</div>
</body>
I've seen a few different options, but most of them rely on knowing the exact size of the div or object to be centred.
For example, this option:
.video-container
{
width: 70vw;
height: calc(70vw * 9 / 16);
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
}
Doesn't work, my video-container element still sits at the top of the page.
I've seen another code example which uses Flexbox to centre:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
but this a no-go for me as it interferes with not only my sticky footer set-up but also the rest of the site content (for obvious reasons).
Is there another way to do this?
edit: I'm not sure why I'm receiving down votes. I've tried to explain the scenario with steps I have taken, and I've now provided full and complete code in both a JS Fiddle and a Stack Snippet. If there is anything else or my question is not clear then please, by all means let me know and I can edit the question.
SO36651747
Centring video in viewport within a sticky footer layout
Changed every style except the iframe. Got rid of the CSS variables (they had no ::root so they were useless). Made .Site-content a flex container because flex containers only affect their children. The elements you wanted to center were the grand-children of .Site, therefore it could not control the centering of the video-container.
Changed the style of the video container so that it's height and width maintains a 9:16 aspect ratio.
See references below.
Changes are marked with 🖉
The red borders are there to show the distance between the header/footer/video.
PLUNKER
README.md
.Site {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden; 🖉
align-items: center; 🖉
align-content: center; 🖉
}
.Site-content {
flex: 1 0 auto;
width: 100vw;
display: flex; 🖉
flex-flow: column nowrap; 🖉
justify-content: center; 🖉
align-items: center; 🖉
}
.Site-header,
.Site-footer {
flex: none;
position: absolute;
z-index: 600;
height: 10vh; 🖉
width: 100vw; 🖉
}
.Site-header {
top: 0;
border-bottom: 1px solid red; 🖉
}
.Site-footer {
bottom: 0; 🖉
border-top: 1px solid red; 🖉
}
.video-container {
position: relative;
width: 100%; 🖉
height: 0; 🖉
padding-bottom: 56.25%; 🖉
margin-left: auto;
margin-right: auto;
}
References:
Flexbox - align-items
Responsive Video