ISSUE:
When I assign a static width to the flex'a parent container, the flex functionality stops working.
MY GOAL:
To have a functional flex layout within a parent container that has a static width.
RIGHT NOW:
This flex layout works perfectly using a "100%" parent container width. But the "flex" stops working when I assign a static width.
Meaning...
As long as the current 100% width equals the window size, the flex functions correctly ... as it adjusts to the window's width.
More info:
This flex code will be used within a themed page that only allows for HTML & JS/JQ.
This section will be within a "middle" section of the template/page.
I'm not using a CMS (i.e.: Wordpress)
The template's CSS has the "page" class as 100% width... something that I cannot change
The flex section needs to be centered horizontally in the page
JSFiddle:
The default CSS in the JSFiddle below is using the "100%" width for the container = Flex works fine. I have commented the CSS class parameter (mainwrapper) that causes the flex to stop working.
JSFiddle Link:JSFiddle
Use max-width:980px you can remove width:100% because i assigned maximum width 980px.
If i missed some thing please check fiddle code
Working fiddle
.mainwrapper {
width: 100%;
/* Here's the problem:*/
/* Asigning a static width breaks flex */
max-width: 980px;
text-align: center;
}
.page {
width: 100%;
margin: 0 auto;
}
.mainwrapper {
width: 100%;
/* Here's the problem:*/
/* Asigning a static width breaks flex */
max-width: 980px;
text-align: center;
}
/* Product Layout */
.section-holder {
display: flex;
flex-flow: row wrap;
}
.section-item {
display: flex;
flex-direction: column;
padding: 2%;
flex: 1 24%;
background-color: #FFF;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
}
.section-image img {
width: 100%;
}
.section-info {
margin-top: auto;
padding-top: 20px;
text-align: center;
}
#media ( max-width: 768px) {
.section-item {
flex: 1 21%;
}
.section-holder .section-item {
flex: 2 46%;
}
}
#media ( max-width: 680px) {
.section-item {
flex: 1 46%;
}
}
#media ( max-width: 480px) {
.section-item {
flex: 1 100%;
}
.section-holder .section-item {
flex: 2 100%;
}
}
<div align="center" class="page">
<div class="mainwrapper">
<div class="section-holder">
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
<div class="section-item">
<div class="section-image">
<img src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369">
</div>
<div class="section-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</div>
</div>
</div>
I think you just need to change the display for the class page to flex from block. If I am understanding your question correctly.
.page {
width: 100%;
margin: 0 auto;
}
to
.page {
display: flex;
width: 100%;
margin: 0 auto;
}
Related
Im trying to have 3 images side by side in a flex container but the images are much too large and its stretching the page and creating a scroll bar.Tried a tip to use flex wrap but that didn't work.Should I just resize in photoshop?.
<section class="main-content">
<div class="image">
<img src="img/devil-ivy-can.jpg">
</div>
<div class="image">
<img src="img/krimson-princess-can.jpg">
</div>
<div class="image">
<img src="img/spiderwort-can.jpg">
</div>
</section>
.main-content{
display: flex;
}
div{
width:100%;
padding:10px;
margin:10px;
}
Try this
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
}
img {
width: 100%;
}
div {
flex: 1;
padding: 10px;
margin: 10px;
}
<section class="container">
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
</section>
hello i have try to solve your problem you can try this in your CSS code.
.main-content{
display: flex;
gap:10px
}
div{
width:100%;
gap:10px;
}div.image img{
width:100%;
object-fit:cover;
}
<section class="main-content">
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
</section>
in your css code at div selector i prefer using gap to give space between items than using padding and a margin
if you give the img width 100% it will fill the div.image and set object-fit with value cover. The CSS object-fit property is used to specify how an or should be resized to fit its container.
I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.
I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?
I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.
.parent {
width: 170px;
}
.flex {
display: flex;
}
div {
outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
<p>scenario A</p>
<div class="parent flex">
<div>
<div class="one">A short title</div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
<div>
<p>scenario B</p>
<div class="parent">
<div class="one">Testing a very long title</div>
<div class="flex">
<div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
</div>
<p>can a component achieve both a and b with only css?
I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.
Will wait a bit before accepting my own solution in case someone came with a better one.
.container {
width: 300px;
display: flex;
gap: 10px;
padding: 16px;
font-size: 14px;
font-family: Arial;
}
.text {
flex: 1;
min-width: 0;
}
.first-row {
height: 22px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.image {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #444;
}
.title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test title test title</div>
<button>Visit store</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Short title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Short title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Very long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test titleTest title test titleTest title test title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
Could anyone please help me with this, How can I make the parent container flexible and make it reflow ready?
.container{
width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}
<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>
Since you are referring reflow as browser width change and your default width for the container is 350px
just your change width: 350px to max-width: 350px. Your container is now responsive for smaller browser width
You can play around around here and change the browser here:
.container{
max-width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}
<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>
<div class="testt">
<div class="test">
<img src="4.jpg">
test
</div>
<div class="test">
<img src="5.jpg">
test
</div>
<div class="test">
<img src="7.jpg">
test
</div>
<div class="test">
<img src="6.jpg">
test
</div>
If you can help me for the pictures to be one line and the anchor beneath them nicely centered and also to be responsive for all devices
You can use display: flex; on the parent and that will put everything on one line, give it a relative width so that it scales with the viewport, assign text-align: center; to the .test divs to center the contents, and give the img a max-width: 100% so that it scales with the parent size.
.testt {
display: flex;
width: 90%;
margin: auto;
}
.test {
text-align: center;
}
.test img {
max-width: 100%;
display: block;
}
<div class="testt">
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
</div>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}