I have this div:
<div class="cart-info">
<img src="./assets/images/conserve2.jpg" alt="">
<div class="product-info">
<p>Peperoni sott'olio</p>
<small>da Rivenditore</small>
<br>
<button id="btn-cart" class="btn bg-cart">Rimuovi</button>
</div>
</div>
and the div looks like:
https://i.stack.imgur.com/iLh1y.png
The The "Rimuovi" button should be aligned on the bottom of the div, so exactly on the same line as the image. Do you know how I can solve?
My css is:
.cart-info {
display: flex;
flex-wrap: wrap;
}
.cart-info {
display: flex;
}
.product-info {
display: Flex;
justify-content: space-between;
flex-direction: column;
}
.product small {
display: block
}
<div class="cart-info">
<img src="https://image.shutterstock.com/image-vector/sample-stamp-square-grunge-sign-260nw-1474408826.jpg" alt="">
<div class="product-info">
<div class="product">Peperoni sott'olio
<small>da Rivenditore</small>
</div>
<br>
<button id="btn-cart" class="btn bg-cart">Rimuovi</button>
</div>
</div>
Related
The issue I am facing is not that big of a problem but it could potentially ruin the look of my page. The problem is I have a div card that is a flex object i.e it's parent div has its display set to flex
.season-list{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
flex-direction: row;
}
<div class="season-list container">
<div class="card">
<img class="image" src="some.jpg" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Now what happens is that setting justify-content as space-evenly does organize the card object properly i.e three in a row, however, when i have lets say 7 cards, it organizes the first three normally but ends up aligning the last card in the bottom-centre of the previous row. I have tried messing around with different justify-content values but to no avail. Like i said this is not a big problem but could make the page look a little less pleasing to the eye.
You could switch to the grid display to avoid this :
example with a card of 250px (update this value to your needs)
.season-list {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: space-evenly;
gap: 1em;
}
<div class="season-list container">
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Play in full screen to check its behavior or play with the codepen : https://codepen.io/gc-nomade/pen/BapgbYx (added a few examples borders to the card and grid-auto-rows to set each rows the same height.)
enter image description here
I think this is exactly what you're looking for
.season-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.card {
background-color: rgb(247, 56, 56);
color: rgb(255, 255, 255);
width: 10rem;
height: 10rem;
margin: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
I have card carousel in react .Card increases its height depending on the contents .
this is my code.
<Slider {...carouselCardProps} ref={(node: any) => (carouselCardContainer = node)} >
{gameNewsData &&
gameNewsData.map(data => (
<NewsItem
gameData={data}
skeletonLoading={false}
></NewsItem>
))}
</Slider>
<RightOutlined className="cxe-right-arrow" onClick={() => carouselCardContainer.slickNext()} />
newsITem component
<div className="cxe-news-card">
<div className="cxe-news-item-header">
<div className="cxe-news-avatar ">
<img alt="avatar" src={gameData.source.page.page_logo.url} />
</div>
<div className="cxe-news-content">
<span>{gameData.source.name}</span>
<span>
{moment
.unix(gameData.created_at)
.format("MM/DD/YYYY hh:mm:ss")}
</span>
</div>
</div>
<div className="cxe-new-section">
<img alt="newsItem" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"/>
<div className="cxe-news-content-container">
<h3 className="cxe-news-heading">{gameData.title}</h3>
<p className="cxe-news-content-details">{gameData.summary}</p>
<a className="cxe-read-more" href="/">Read More</a>
</div>
</div>
</div>
if h3 has 2 line text then card becomes unequal how can we fix it
I think you can use flexbox to have equal card height.
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.flex-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Then you can apply 'flex-container' to container (with className cxe-new-section) and 'flex-item' to all the items you want to show as children of it.
I'd like all divs to be centered, both horizontally and vertically, but have the headings on the left (Posters, Lobby Cards and Misc) remain centered no matter how many rows may be needed next to them on their right.
And I want to do it all with Flexbox!
Here is what I have:
Here is what I'd like to have:
#hrthick {
color: #800000;
background-color: #800000;
width: 90%;
height: 10px;
}
.EPWrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.EPHeader {
width: 200px;
}
.EPContent {
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
<div class="EPButtonInner">
<div class="EPWrapper">
<div class="EPHeader">
<img src="http://i.imgur.com/A7NvL35.png">
</div>
<div class="EPContent">
<a href="http://imgur.com/VtTQdEg">
<img src="http://i.imgur.com/VtTQdEgm.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/ELV6u2i">
<img src="http://i.imgur.com/ELV6u2im.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/1XoSRx1">
<img src="http://i.imgur.com/1XoSRx1m.jpg" title="source: imgur.com" />
</a>
</div>
</div>
<!-- EPWrapper -->
<hr id="hrthick">
<div class="EPWrapper">
<div class="EPHeader">
<img src="http://i.imgur.com/ZJiFNlg.png">
</div>
<div class="EPContent">
<a href="http://imgur.com/5SmCQPE">
<img src="http://i.imgur.com/5SmCQPEm.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/sXj4N3W">
<img src="http://i.imgur.com/sXj4N3Wm.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/6eBofBD">
<img src="http://i.imgur.com/6eBofBDm.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/7zDGNgk">
<img src="http://i.imgur.com/7zDGNgkm.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/VjpjUSu">
<img src="http://i.imgur.com/VjpjUSum.jpg">
</a>
</div>
</div>
<!-- EPWrapper -->
<hr id="hrthick">
<div class="EPWrapper">
<div class="EPHeader">
<img src="http://i.imgur.com/oaTM0xH.png">
</div>
<div class="EPContent">
<a href="http://imgur.com/kD1U5i3">
<img src="http://i.imgur.com/kD1U5i3m.jpg">
</a>
<br>(Herald)</div>
<div class="EPContent">
<a href="http://imgur.com/skg6N8u">
<img src="http://i.imgur.com/skg6N8um.jpg">
</a>
</div>
<div class="EPContent">
<a href="http://imgur.com/WidGPsF">
<img src="http://i.imgur.com/WidGPsFm.jpg">
</a>
</div>
</div>
<!-- EPWrapper -->
</div>
<!-- EPButtonInner -->
Thank You in advance :)
For each section (.EPWrapper), you have the heading and the images wrapped together in the same flex container.
That means that when the images begin to wrap, they will naturally start the next row in the first column (right under the heading).
To achieve the layout you want, you would need to force the images to wrap, but start the next row in the second column. This also frees up the space in the first column for the heading to move around vertically.
One solution is to put the heading and images in separate flex containers, aligned side-by-side.
Here's an example using your "Lobby Cards" section:
/* new */
.headings {
display: inline-flex; /* inline-level flex container */
align-items: center;
justify-content: center;
}
/* new */
.images {
display: inline-flex; /* inline-level flex container */
align-items: center;
justify-content: center;
flex-wrap: wrap; /* images are allowed to wrap in this container */
}
/* original code */
#hrthick {
color: #800000;
background-color: #800000;
width: 90%;
height: 10px;
}
.EPWrapper {
display: flex;
/* flex-wrap: wrap; remove; this would allow image container to wrap
under the heading container */
justify-content: flex-start;
align-items: center;
}
.EPHeader {
width: 200px;
}
.EPContent {
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
<div class="EPButtonInner">
<div class="EPWrapper">
<section class="headings">
<div class="EPHeader"><img src="http://i.imgur.com/ZJiFNlg.png"></div>
</section>
<section class="images">
<div class="EPContent">
<img src="http://i.imgur.com/5SmCQPEm.jpg">
</div>
<div class="EPContent">
<img src="http://i.imgur.com/sXj4N3Wm.jpg">
</div>
<div class="EPContent">
<img src="http://i.imgur.com/6eBofBDm.jpg">
</div>
<div class="EPContent">
<img src="http://i.imgur.com/7zDGNgkm.jpg">
</div>
<div class="EPContent">
<img src="http://i.imgur.com/VjpjUSum.jpg">
</div>
</section>
</div>
</div>
How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other.
How will be the css for the below html?
<div class="container">
<div class="wrapper">
<div class="left">
<img src="img1.png" />
</div>
<div class="right">
<img src="img2.png" />
</div>
</div>
</div>
You can use css float to get contained elements to sit either side
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
<div class="container">
<div class="left"><img src='http://placehold.it/350x150'/></div>
<div class="right"><img src='http://placehold.it/350x150'/></div>
</div>
Edit: You can use Flex-Box
.container {
width: 100vw;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.container > img {
align-self: auto;
margin: 4px;
}
<div class="container">
<img src='http://placehold.it/350x150'/>
<img src='http://placehold.it/350x150'/>
</div>
Try using bootstrap grid's. It can be something like this.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
</div>
<div class="col-sm-6">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">
</div>
</div>
Demo
I want to align my right panel until the end. Do I need to add something to the CSS?
<div class="row flex">
<div class="col-md-5">
<div class="panel panel-default panel-no-border">
<div class="panel-body">
<p>
<strong>Smart XXXXX Europe Limited (XXXX Branch) </strong><br />
Address <br>
Address <br>
Address <br>
Address <br>
customer.relations#company.com<br>
www.comapny.com<br>
</p>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-2 text-right">
<div class="panel panel-default panel-no-border">
#*<div class="panel-heading">
<h4>Mr. John Ryan</h4>
</div>*#
<div class="panel-body">
<p>
<strong>Mr. John Ryan</strong><br />
36 Praed street <br>
XXXX, XXXXXX<br>
XXXXXX<br>
</p>
</div>
</div>
</div>
</div>
CSS:
.flex, .flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
}
.panel {
display: flex;
flex-direction:column;
align-content:stretch;
}
.panel-body {
display: flex;
flex-grow:1;
}
Just add justify-content: flex-end to the parent of the panel:
<div class="col-md-5 col-md-offset-2 text-right your-class">
.your-class {
justify-content: flex-end;
}
Demo: http://www.bootply.com/dsg1qHNopH
You must wrap divs and then add padding-right= 0px; to second div.
see working fiddle
`https://jsfiddle.net/nzLsedob/`
check out here
I hope this is the answer you want.