I am using Elementor Pro and was looking to see if it is possible to create this layout with Flexbox:
I was hoping to create a gallery with this layout, but not sure if this is possible using Flexbox?
Here is the site link: https://davidandgeorge.co.uk/
Thanks for any tips.
Cheers
flex:
body {
margin: 0;
}
.wrap, .flex-col {
display: flex;
}
.flex-col {
flex-direction: column;
}
.wrap {
padding: .25rem;
flex-grow: 1;
}
.basis-1\/3 {
flex: 0 0 33.333333%;
}
.aspect-4\/5 {
aspect-ratio: 4/5;
}
.wrap img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="wrap">
<div class="wrap aspect-4/5">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
</div>
<div class="flex-col basis-1/3">
<div class="wrap">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
</div>
<div class="wrap">
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
</div>
</div>
</div>
grid:
body {
margin: 0;
}
.grid-1 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: .5rem;
padding: .5rem;
}
.grid-1 div:first-child {
grid-area: 1/1/3/2;
aspect-ratio: .8;
}
.grid-1 div img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
<div class="grid-1">
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1653045352509-PWI7Q226NN0ZD85GVHR8/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-makers-weaver-woven-textiles-majeda-clarke-min.jpg?format=2500w" />
</div>
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648550640739-ABYK0CIPHJIZ9V1LQ872/squarespace-website-design-food-and-drink-london-dry-gin-spirits-uk-no-3-gin-thumbnail-min.jpg?format=1000w" />
</div>
<div>
<img src="https://images.squarespace-cdn.com/content/v1/5938092adb29d602a8eb55d8/1648551399057-U3TMJ3YJMHZRK1W8D3LL/david-and-george-squarespace-website-designer-london-edinburgh-uk-portfolio-consultants-media-and-content-creators-professional-business-bespoke-pr-campaigns-luxury-travel-wellness-lifestyle-nadia-walford-pr-min.jpg?format=1000w" />
</div>
</div>
Grid has slightly cleaner syntax, for both CSS and HTML so... why flex?
It is. I would create a wrapper div for all of the images, then another wrapper div for the two smaller images aside.
Then, just use display: flex for the big wrapper, and display: flex with flex-direction: column for the smaller one.
Related
I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.
Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.
Any tips.
outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
}
.right-image {
width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
max-height: 100%;
}
.right-image {
width: 100%;
max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
This might work as a starting point. Not 100% sure how you want the first column in relation to the second.
I added a footer since you seemed to indicate that?
.outer-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 100px;
background-color: green;
height: 100vh;
}
.left-column {
/* keeps the left image in the box */
min-height: 0;
grid-row: 1 / 2;
grid-column: 1 / 1;
border: solid cyan 2px;
display: flex;
justify-content: center;
}
.right-column {
border: solid yellow 2px;
display: flex;
align-items: start;
justify-content: top;
flex-direction: column;
}
.left-image {
height: 100%;
}
.right-image {
width: 100%;
}
.footer {
/* put accross all columns of last row and super center content */
grid-column: 1 / 3;
grid-row: 3 / 3;
background-color: #ffdd88;
display: grid;
align-items: center;
justify-content: center;
}
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</div>
<div class="footer"> I am the footer thing</div>
</div>
.wrapper{
display: grid;
grid-template-columns: minmax(200px, 7fr) 4.4fr;
grid-column-gap: 64px;
}
.block{
background: red;
height: 100px;
}
<div class="wrapper">
<div class='block block-1'></div>
<div class='block block-2'></div>
</div>
I have a simple css grid here with two columns but it doesn't work in IE 11
Can I get this working in IE ?
Here's a flex example. Every odd block will be 55% wide, and even ones will be 35% wide.
.wrapper {
display: flex;
justify-content: space-between;
}
.block {
background-color: red;
height: 100px;
}
.block:nth-child(odd) {
width: 55%;
}
.block:nth-child(even) {
width: 35%;
}
<div class="wrapper">
<div class='block'></div>
<div class='block'></div>
</div>
How I can make responsive flexbox?
So I use flexbox and two divs, one for leftside and one for right side.
Screen is like splitted, left side is image and right side info and inputs.
But left side isn't responsive if ajax loads more data, then white space is coming under the image.
My HTML:
<div class="forny-container">
<div class="forny-inner">
<div class="forny-two-pane">
<div></div> <!-- form div -->
<div></div> <!-- image div -->
</div>
</div>
</div>
My CSS:
.fo-container {
display: block;
align-items: center;
height:100%;
}
.fo-inner {
display: block;
height: 100%;
width: 100%;
}
.fo-two-pane {
height: 100%;
display: flex;
flex-direction: row-reverse;
}
.fo-two-pane > div {
flex: 1;
}
.fo-two-pane > div:first-child {
display: flex;
align-items: center;
background: white;
}
.fo-two-pane > div:last-child {
background: url('http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg') center center no-repeat
hsla(31, 80%, 93%, 1);
display: none;
}
If ajax loads more data or error messages into form div then white space is coming under the image:
What is going wrong?
I guess this should solve your problem. Here the working code.
.flex-container {
display: flex;
}
.image-selector {
width: 50%;
}
.left {
flex: 1;
background: lightblue;
text-align: center;
}
.right {
flex: 1;
background: lightpink;
}
.right h1 {
text-align: center;
}
.content {
margin-left: 20px;
}
<div class="flex-container">
<div class="left">
<h1>Left</h1>
<img class="image-selector" src="https://agentpekka.com/wp-content/uploads/2018/11/AP_MVM_Apple_2x-640x854.jpg" alt="image">
</div>
<div class="right">
<h1>Right</h1>
<div class="content">
<h2>Heading</h2>
<h3>Subheading</h3>
<h4>Somecontent</h4>
<lable>Name:</lable>
<input type="text" placeholder="name">
<p>description goes here, some more content</p>
</div>
</div>
</div>
Click for Codepen link
Additionally, you will need to use Media Queries for handling different screen sizes and different view ports.
I want my two buttons, that are actually <a> tags, stick with my input, and be the same size as input. Image perfectly describes what I want to achieve.
Note that I am just starting to learn SASS and CSS. I have tried with this but no luck
NumberInput.js
<div
className="NumberInput"
data-key={dataKey}>
<div className="numberInputField">
<input
data-key={dataKey}
type="text"
name="number"
value={getValue(datakey)}
onChange={onChange(datakey)}/>
</div>
<div className="buttonsField">
<div className="row">
<ValueChangeButton/>
</div>
<div className="row">
<ValueChangeButton/>
</div>
</div>
</div>
NumberInput.scss
$inputMaxWidth: 450px;
$maxHeight: 80px;
$btnFieldMaxWidth: 150px;
.NumberInput{
max-width: $inputMaxWidth;
max-height: $maxHeight;
.numberInputField{
display: inline-block;
text-align: center;
max-width: inherit;
max-height: inherit;
}
.buttonsField{
display: inline-block;
max-width: $btnFieldMaxWidth;
max-height: $maxHeight;
.button{
width: auto;
height: auto;
}
}
}
The result I get is, buttons are contained in their respective rows, but are not the same size as input, and they are flying all around the page. Also, if I change the className of my input, and set the className of its <div> to "numberInputField", it doesn't change its width and height.
Flexbox is perfect for this:
body {
margin: 1em;
}
.NumberInput {
display: flex;
max-width:450px;
margin:auto;
}
.numberInputField {
flex: 3; /* say 3/4 of width */
display: flex;
flex-direction: column;
}
input {
padding: 1em 4em;
flex: 1;
}
.buttonsField {
flex: 1; /* say 1/4 of width */
display: flex;
flex-direction: column;
}
.row {
flex: 1; /* share width equally */
}
a {
width: 100%;
display: block;
background: rebeccapurple;
text-align:center;
text-decoration: none;
font-size: 1.5em;
color: white;
border:1px solid grey;
}
<div class="NumberInput">
<div class="numberInputField">
<input type="submit" />
</div>
<div class="buttonsField">
<div class="row">
↑
</div>
<div class="row">
↓
</div>
</div>
</div>
My website is completely broken in IE11. The problem comes from flex: 1 1 0%;, which I use everywhere thanks to autoprefixer and postcss-flexbugs-fixes.
The site does work on IE when I change it to flex: 1 1 auto;, but then some behaviors change (e.g. one flexbox with two flex: 1 1 auto; children which do not take exactly the same space). Therefore this solution breaks my designs on other browsers (while making it a lot nicer - not broken - on IE11).
How do people manage to make their sites built with Flexbox work on IE11?
Edit: here is a pen which highlights the problem I am facing: https://codepen.io/Zephir77167/pen/GMjBrd (try it on Chrome and IE11).
Edit2: here is the code:
HTML:
<div id="a" class="flex">
<div id="b" class="item flex-1">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1">
Heyheyheyheyho
</div>
</div>
<br />
<div id="a" class="flex">
<div id="b" class="item flex-1-variation">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1-variation">
Heyheyheyheyho
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#a {
background-color: pink;
height: 300px;
width: 100px;
}
#b {
background-color: green;
height: 50px;
}
#c {
background-color: blue;
height: 100px;
}
#d {
background-color: yellow;
height: 150px;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.item.flex-0 {
flex: none;
}
.item.flex-1 {
flex: 1 1 0%;
}
.item.flex-1-variation {
flex: 1 1 auto;
}
When it comes to IE11, you could target it explicit using this CSS rule:
_:-ms-fullscreen, :root .IE11-only-class {
/* IE11 specific properties */
}
Stack snippet
* {
box-sizing: border-box;
}
#a {
background-color: pink;
height: 300px;
width: 100px;
}
#b {
background-color: green;
height: 50px;
}
#c {
background-color: blue;
height: 100px;
}
#d {
background-color: yellow;
height: 150px;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.item.flex-0 {
flex: none;
}
.item.flex-1 {
flex: 1 1 0%;
}
_:-ms-fullscreen, :root .IE-FlexAuto {
flex-basis: auto;
}
<div id="a" class="flex">
<div id="b" class="item flex-1 IE-FlexAuto">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1 IE-FlexAuto">
Heyheyheyheyho
</div>
</div>
Here is a post with an answer of mine, which talks some more about this, and also provide some script solutions which might be helpful
Instead of using prefixes I want to ask site visitors to upgrade their browser
I had a massive headache over this, rather than do a hack, set your flex-basis to auto, then if you have a container size, set the with to the same size, ie:
#include breakpoint(m){
flex: 0 48%;
flex-basis: auto;
width: 48%;
}