How could i make sure my <p class="title"></p> and
<p class="subtitle"></p> are displayed underneath of eachother because right now they are being displayed next to eachother
You can make use of flexbox, it'll definitely solve your problem.
Example
If you want to arrange two items underlying with each other:
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
If you want to arrange two items next to each other.
.container {
display: flex; /*by default it will align items in one row*/
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
Related
I am trying to get the price under the annual plan.
.paymentsection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
final image
The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-container">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
</div>
.paymentsection {
display: flex;
flex-direction: row;
}
.plan-container{
flex-grow:1;
}
You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-wrapper">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
next you need to set flex direction to your new div element. this is your desire style:
.paymentsection {
display: flex;
}
.plan-wrapper{
display: flex;
flex-direction: column; /* default is row */
}
this changes should fix your issue.
To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column.
You could do something like this:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="pricing">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
Styles for pricing class:
.pricing{
display:flex;
flex-direction: column;
}
In my website, I have a search which outputs its results in card format, like this:
However, when multiple results are displayed, they don't overflow to the next line, but instead the cards stay on the same line and get skinnier, and the content inside the cards looks ugly. It becomes more like this:
.
The div-card code:
<div class="card">
<a href="#">
<div class="image">
<div class="title">
</div>
</div>
</a>
<div class="description">
<h5>Title</h5>
<p>Description</p>
</div>
</div>
and the CSS for the card div (I don't think the image and description div css matter here):
.card
{
height:18em;
width:14em;
margin: 10px;
display: flex;
flex-wrap: wrap;
flex-direction:column;
position:relative;
border-radius:16px;
overflow:hidden;
box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
As you can see, the divs are flex objects, and I've added the flex-wrap: wrap property, but it doesn't wrap. I've also tried other solutions, such as display: inline or display: inline-block or float: left, none of which work (I've obtained all these solutions from online, mostly Stack Overflow, but since they don't work I had to make another post about this issue).
Could someone help me fix the issue? Remember, the results are output by a search, so it's not possible to manually fix the wraps, by, for example, doing a line break.
Thanks!
the problem is that you are making a single card flex. this is not how flex works the container div in which all of your search result cards appears need to be flex so if we have a div like this
<div class="continer">
<item1 class="card">
<item2 class="card">
<item3 class="card">
<item4 class="card">
</div>
then you need to do this
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: <as you like it is optional>;
.... and other properties as you like
}
I'm trying to left align B and then right align C only if there is space, if there is not enough space, how do I make just position itself after B instead of right aligning? is this only doable with javascript or can I do it from CSS?
<div class='A'>
<div class='B'/>
<div class='C'/>
<div>
I actually have it working using javascript to apply css classes and update based on those, but I was wondering if it was possible without doing that.
You can use flexbox. By using justify-content:space-between; items takes space in between of them
.A{
display:flex;
justify-content:space-between;
}
<div class="A">
<div class="B">B</div>
<div class="C">C</div>
</div>
Try out display: flex
like this:
<div class=‚flex a‘>
<div class=‚b‘></div>
<div class=‚spacer‘></div>
<div class=‚c‘></div>
</div>
And use this CSS
.flex {
display: flex;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto
}
For more information how flex works look here
Yes you can use
flex-wrap: wrap;
remove display flex in your style
I'm using Bulma have a column of cards which need to have the same height regardless of the content.
To achieve so I have created the following class
.equal-height
display: flex
flex-direction: column
height: 100%
My HTML looks like
<div class='columns is-multiline'>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
</div>
Which produces something like
Now I'm trying to make the card-footer to stick at the bottom of the card like below.
I have tried a few things with flex but they don't really make sense.
Any ideas on how I may do it?
Add "flex: auto;" to '.card-contents' to make the card-footer to stick at the bottom of the card. Here is the working jsfiddle link.
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .card-content {
flex: auto;
}
Add this CSS
.card-footer {
margin-top: auto;
}
working demo : https://jsfiddle.net/baLg7940/
I want to make my Bootstrap 3 columns to be:
of the same height (edit: equal to the highest column, which could change)
have visible gutters separating them
have a background color that matches their equal height
So far I was able to either make them of equal height (with no visible gutter) or give them a gutter and a background. I've been fiddling with this for the past 2 hours to no avail. Naturally, I've read through everything I could find but couldn't solve this riddle. Would highly appreciate your help!
Here is code and codepen with my problem.
HTML
<div class="container">
<div class="flex-row row">
<div class="col-sm-5">
<div class="inner">
<p>Some text and probably an image over here. Not as much as on the other side, but still..</p>
</div>
</div>
<div class="col-sm-7">
<div class="inner">
<p>More content on this side. How can I make the two columns have the same height and have a gutter in between?</p>
<img src="...">
</div>
</div>
</div>
</div>
CSS
div[class^='col-sm-'],
div[class*=' col-sm-'] {
background-color: green;
}
#media only screen and (min-width : 768px) {
.flex-row.row {
display: flex;
flex-wrap: wrap;
}
.flex-row.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
http://codepen.io/anon/pen/QEozAj
I don't want columns to be of fixed height because contents will change.
And ideally I would like to have as little extra divs as possible. :)
Edit: Column heights now look okay, thanks to a helpful reply. Still need the visible gutter.