I do have the following HTML output:
so, as you can see the footer isn't matching...
my css component looks like this:
.card-equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.card-equal-height
.card-footer {
margin-top: auto;
height: 100%;
}
.card-equal-height.card-footer this part is not working somehow. I want the footer to be matching the order cards, no matter how long the description is.
html:
<div [ngClass]="{'card-highlight': product.listItemHovered}" class="card card-equal-height"
(mouseenter)="hoverListItem(product)"
(mouseleave)="hoverListItem(product)"
(click)="test(product)">
<div class="card-image">
<figure class="image is-square">
<img [src]="product.imageURL" alt="{{product.title}}">
</figure>
</div>
<div class="card-content">
<p class="title has-text-centered"> {{product.title}}</p>
<p class="subtitle">{{product.price | currency: "USD"}}</p>
</div>
<div class="card-footer">
<p class="card-footer-item">
<button (click)="removeFromCart(product); showRemoved()"
class="button is-danger is-outlined is-pulled-left is-small"> Remove
</button>
</p>
<p class="card-footer-item">
<button (click)="addToCart(product);showAdded()"
class="button is-outlined is-primary is-pulled-right is-small"> Add to Cart
</button>
</p>
</div>
</div>
I think you can achieve changing the height of "card-content" (forget change the .card-footer) using flex-grow
.card-equal-height
.card-content {
flex-grow:1;
}
For more about flex, check this link in css-tricks
Related
I have no idea why my website cannot display to change flex (I mean, some element of text on the left side and the images on the right side), why it's not working?
.presentation {
display: flex;
width: 90%;
margin: auto;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.cover img {
height: 60vh;
}
<main>
<section class="presentation">
<div class="introduction">
<!--intro text..., -->
<div class="intro-text">
<h1>mac</h1>
<p>This is the latest laptop and this laptop is the best ever until nobody doubt that want to mac. This is very powerfull, strong and almost 8k</p>
</div>
<!--button ...,-->
<div class="cta">
<button class="cta-select">14-inch</button>
<button class="cta-add">Add Cart</button>
</div>
<!-- and images of laptop -->
<div class="cover">
<img src="https://bhrigu.me/images/mac.png" alt="laptop mac">
</div>
</div>
</section>
</main>
You have mistakenly used flex property in root directory. Which elements you want to apply flex property/display, you have to use flex property immediate on parent div.
For example:
You have to put flex on intro-text class.
CSS:
.intro-text {
display: flex;
}
<div class="intro-text">
<!--button ...,-->
<div class="cta">
<button class="cta-select">14-inch</button>
<button class="cta-add">Add Cart</button>
</div>
<!-- and images of laptop -->
<div class="cover">
<img src="https://bhrigu.me/images/mac.png" alt="laptop mac">
</div>
</div>
And if you want to place an element in the right position. Just use
.cover {
margin-left: auto;
}
Please take a look here:
https://codepen.io/ilazycoder/pen/jOWQvYj
In this CodePen, I am trying to get the .icon div to appear the full height of the div it's in. Unfortunately, it looks like it's loading before the text is there so the div has a height of 0 when it loads. How would I get it to load once the text is there and grab that full height? Preferably with no JS if possible.
All help is appreciated!
HTML
.faqSection {
height: 600px;
width: 100vw;
}
.topFaqSection {
margin: 100px 0 40px 10vw;
}
.innerFaqSection {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.leftFaq {
width: 35%;
height: 100%;
/* background-color: violet; */
}
.rightFaq {
width: 35%;
height: 100%;
/* background-color: blanchedalmond; */
}
.singleFaqBlock {
margin: 20px 0 0 0;
}
.questionBlock {
background-color: red;
display: flex;
flex-direction: row;
align-content: flex-start;
}
.icon {
background-color: blue;
width: 50px;
height: 100%;
}
.questionText {
/* display: none; */
background-color: green;
width: 100%;
}
.answerBlock {}
.answerBlock p {
margin: 0 0 0 62px;
}
.hiddenText {
display: none;
}
.notHiddenText {
display: block;
}
<div class="faqSection">
<div class="topFaqSection">
<h1>Questions? Look Here</h1>
<div class="bar blue"></div>
</div>
<div class="innerFaqSection">
<div class="leftFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
How do I earn a return?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
What kind of returns can I expect?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
<div class="space"></div>
<div class="rightFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
When is the platform releasing?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
Why invest in real estate? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
I'm a - and interested in raising money through -, what should I do? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
</div>
</div>
As I said in a a comment, removing the height: 100% rule should fix it for you. The "why" for it is a bit... unsavory.
Flex children default to "align-self: stretch", so they'll stretch naturally. But when you set a height, it will use that value. The problem is percentage height is calculated from the height actually specified for the parent and .icon's parent (.questionBlock) has no height specified: so .icon gets 100% of 0. If you were to set a height to .questionBlock, .icon would adapt.
From the specs:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
This is the comment that pointed me into the right direction. Maybe check it out?
here is my code, I need to display a page with 3 images one is on the left and other two on the right side but all images are displaying in the same line, they are not displaying in order that I
List item
have given. please help me in solving these.
.leftAlign {
float: left;
}
.rightAlign {
float: right;
margin: 10px;
}
.rightOrder{
float: right;
margin: 10px;
}
.primary-button {
background-color: #109bd5;
color: white;
}
<div class="about-content">
<h4 mat-dialog-title>Hello World</h4>
<div mat-dialog-content>
<div class='leftAlign'>
<h4>IMAGE1</h4>
<img src="assets/images/image1.png">
</div>
<div class='rightAlign'>
<h4>IMAGE2</h4>
<img src="assets/images/image2.png">
</div>
<div class='rightOrder'>
<h4>ICON</h4>
<img src="assets/images/icon_img.png">
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-button mat-dialog-close class="mat-button primary-button">close
</button>
</div>
</div>
<div style="display:flex;justify-content:space-between;">
<div>
<!-- This will be left aligned -->
<img src="https://via.placeholder.com/150?text=1" alt="image 1">
</div>
<div>
<!-- This will be right aligned -->
<div>
<img src="https://via.placeholder.com/150?text=2" alt="image 2">
</div>
<div>
<img src="https://via.placeholder.com/150?text=3" alt="image 3">
</div>
</div>
</div>
Please have look at this, if you are using Bootstrap, I will recommend using it instead of giving inline style.
I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?
Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html
Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.
I also simplified my HTML
Code
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 nopadding">
<img class="img-responsive" src="img/clients/ivey.jpg">
</div>
<div class="col-md-3 nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
<div class="col-md-3 nopadding cinfo">
<img class="img-responsive" src="img/clients/rufus.jpg">
</div>
<div class="col-md-3 nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>
You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically
(UPDATED)
You can use the Pseudoclass to select the 2 and 4 div.
.row div:nth-child(2n) {
/* Your CSS Style */
}
If the content inside the 2 and 4 div are inline/inline-block, just use text-align: center;.
Demo
Here is the simple demo for the pseudoclass.
.row > div {
padding: 10px;
}
.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
Hope this is helpful for you.
Thanks.
Try a different approach. Bootstrap's floating grid system will not get you where you want.
First, remove row and col- classes so you have something like this:
<div class="my-row">
<div></div>
<div></div>
<div></div>
</div>
Then use CSS to achieve the same result as before, but with the content aligned center:
#media (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
If you are using SASS, then replace hardcoded 992px with the #screen-md-min variable.
Here's a JsFiddle of your simplified example:
https://jsfiddle.net/mpnz9b30/1/
<div class="col-md-6 nopadding cinfo">
<div class="clientinfo">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>
I am trying to adapt the Material Design in my personal website using materializecss.com, however the framework only provide options to exclude otherwise images on top of the CARD design.
I want to achieve something as shown below in the link [2nd row, 2nd column/ last image] where the image is sitting at left beside the main content, wondering if anyone could help me on this and I would really appreciate your help on this. thanks!
Card Material Design Example
#vizFlux
Here is the code which you want
.card-image {
float: left;
width: 40%;
height: 250px;
}
.card-image img {
height: 100%;
}
.right-content {
width: 60%;
float: left;
}
.card-title {
padding-left: 20px;
}
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" class="hoverZoomLink">
</div>
<div class="right-content">
<span class="card-title">Card Title</span>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
the output should look something like this:
.card-image {
float: left;
width: 40%;
height: 250px;
}
.card-image img {
height: 100%;
}
.right-content {
width: 60%;
float: left;
}
.card-title {
padding-left: 20px;
}
<div class="card">
<div class="card-image">
<img src="http://www.sauna-nj.co.jp/wp-content/uploads/2017/03/topa-zu.jpg" class="hoverZoomLink">
</div>
<div class="right-content">
<span class="card-title">Card Title</span>
<div class="card-content">
<p>岩盤浴で使用されるのは極めて珍しい鉱石です。加熱変色する宝石の代表。またその中でも大変珍しく、加熱や摩擦圧力で帯電し数時間は維持することができます。その後中和状態に戻る際に発する電荷を身体に受けることで肩こりや冷え性の改善、神経性疲労や神経衰弱の回復など様々な症状を改善するといわれています。
</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
This should help
http://materializecss.com/cards.html
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>