This is my first question here and this is also one of my first codes ever so please be understanding :D
I need to create something like this: https://i.stack.imgur.com/mH18n.png.
I don't know what I can do to make span class="price" to the next line. This is still in the same line with class="annual".
Here is my HTML code:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<span class="annual">Annual plan</span>
<span class="price">$ 59.99/year</span>
<a class="change" href="">Change</a>
</div>
And here is my CSS:
.priceinfo {
display: flex;
justify-content: space-between;
align-items: center;
}
Do you have any ideas what I did wrong and what can I correct?
Thank you in advance!
you can wrap both of your spans in a div with display:'flex' and set its direction to column:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<div class='price'>
<span class="annual">Annual plan</span>
<span class="price">$ 59.99/year</span>
</div>
<a class="change" href="">Change</a>
</div>
and CSS file:
.priceinfo {
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
display: flex;
flex-direction: column;
}
You can just add a line break (<br/>) after each span:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<span class="annual">Annual plan</span><br/>
<span class="price">$ 59.99/year</span><br/>
<a class="change" href="">Change</a>
</div>
Related
I want to add a second Pokemon Ball on the same line and make it on the far right side and I will remove the search function as its only Gen 1.
I have two Pokemon Balls now, here is the image:
Here is my source code in HTML for the images:
<a class="navbar-brand" href="#">
<div class="floatLeft">
<img src="img/pokemon_logo.png" height="40%" width="50%" alt="Pokemon Logo" />
</div>
<h1><strong>Gen 1 Pokemon</strong></h1>
<div class="floatRight">
<img src="img/pokemon_logo2.png" height="40%" width="50%" alt="Pokemon Logo"/>
</div>
<!-- <img src="img/pokemon_alt.png" height="20%" width="20% "alt="Pokemon Logo"> -->
</a>
<!-- This is where we can search for pokemon -->
<!-- <form class="form-inline">
<input class="form-control mr--2" id="search-pokemon" type="search" placeholder="Search for Pokemon" aria-label="Search">
</form> --> </nav>```
This is what I have in CSS:
.floatRight{ float:right; clear:right; margin-left:1400px; }```
I have tried align, float and all that cannot seem to figure it out.
Any help would be appreciated!
try to not use floats, they are a bit "old" for todays standards.
For this purpose you can use Flexbox - more about it here:
Flexbox
.navbar-brand {
display: flex;
align-items: center;
justify-content: space-between;
}
Remove the float right and float left styles and class from html.
set the style
`a {
display: flex;
justify-content: space-between;
align-items: center;
}`
You could use display: flex; and justify-content: space-between; to achieve this
.content {
margin: 50 auto;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="content">
<p>🌹</p>
<p>🌹</p>
</div>
So I was trying to line-break my 2 anchors that i did using the <a> tag. They are inside a flip box.
Basically right now I have my 2 anchors inline but the problem is that I'm using flexbox on the container and I'm not really sure how I could break the 2nd anchor so it would be below my 1st anchor.
My HTML code : Codepen Link
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: center;" class="flip-box-back">
<i class="fas fa-download"></i>
<a href="#" download>download</a>
<hr>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
I alreay tried the <br> and <hr> on HTML but without success.
Example :
Thank you in advance, would be very grateful
You should add flex-flow: column; to your div which wraps your buttons
div {
display: flex;
flex-flow: column;
}
<div>
<button>1</button>
<button>2</button>
</div>
In your case you have to wrap each link and including the icon inside an element such as a div. Otherwise your icon and div will be placed all below each other and not just the 2 "buttons".
Then you can place each wrapped element by adding flex-direction: column;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;" class="flip-box-back">
<div>
<i class="fas fa-download"></i>
<a href="#" download>download</a>
</div>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
Normally a flexbox is no-wrap so you need to add a property to let it break if there is no space left for 2 elements (also you can define the horizontal alignment to centered with justify-content) :
.flexbox{
display: flex;
}
.flexbox2{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flexbox3{
display: flex;
flex-direction: column;
align-items: center;
}
button{
width: 60vw;
}
Default:
<div class="flexbox">
<button>Button1</button>
<button>Button2</button>
</div>
With (auto) wrap:
<div class="flexbox2">
<button>Button1</button>
<button>Button2</button>
</div>
With forced wrap (column view):
<div class="flexbox3">
<button>Button1</button>
<button>Button2</button>
</div>
Example Picture Don't worry about the look of it. I'm trying to align the input and the anchor horizontally with the logo using flexbox. Example attached. The logo will be on the right and the input with the anchor will be on the left but all horizontal.
<div class="small-12 cell footer-logo-container">
<a href="#">
LOGO
</a>
<div class="footer-email">
Sign Up for the Rock River Report Here
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">
SUBSCRIBE
</div>
</a>
</div>
Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Useful website for most of your CSS. If I understood what you wrote correctly you could use this code:
.footer-logo-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.footer-email {
display: flex;
}
<div class="small-12 cell footer-logo-container">
<a href="#">
LOGO
</a>
<div class="footer-email">
Sign Up for the Rock River Report Here
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">
SUBSCRIBE
</div>
</a>
</div>
use the following css code, it should work fine:
.footer-logo-container{
display: flex;
flex-direction: row-revers;
align-items: center;
justify-content: space-between;
}
In flexbox there is three important concepts: flex-direction, align-items and justify-contents.
flex-direction establishes the main-axis, thus defining the direction flex items are placed in the flex container.
In your case you need a flex container which should have display: flex style and you need to set align-items: center and justify-content: space-between.
You can change the order of your elements in html based on your design.
CSS:
.footer-logo-container{
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="small-12 cell footer-logo-container">
LOGO
<div class="footer-email">
<p>Sign Up for the Rock River Report Here</p>
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">SUBSCRIBE</div>
</a>
</div>
</div>
CSS -
.footer-logo-container{
display: flex;
flex-direction: row-revers;
align-items: center;
justify-content: space-between;
}
.footer-email > p {
display: inline-block;
}
.footer-email > input {
display: inline-block;
}
.footer-email > a {
display: inline-block;
}
jsFiddle
I have a checkbox and then i have an anchor tag that displays some text and then will have chevron button to toggle either up or down. Currently my checkbox and anchor tag are on seperate lines and i wanted to have my anchor tag next to my checkbox. How can i style the below code to make it possible.
<header class="refine-menu-subheader" style="display: flex; flex-direction: row; align-items: baseline;">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="item.isActive"
(change)="">
<span class="text-body"></span>
</label>
</div>
<a class="refine-menu-collapse" style="display: flex; flex-direction: row; align-items: baseline;" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id">
<h3 class="refine-menu-subtitle">{{item.name}}</h3>
<span class="win-icon refine-menu-icon"></span>
</a>
</header>
You can use Flex for this quite easily. All you need is align-items: baseline; to center the elements' baselines. flex-direction: row; is the default direction, but I left it in there so there is no confusion.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
header {
display: flex;
flex-direction: row;
align-items: baseline;
}
<header class="refine-menu-subheader">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="item.isActive"
(change)="">
<span class="text-body"></span>
</label>
</div>
<a class="refine-menu-collapse" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id">
<h3 class="refine-menu-subtitle">{{item.name}}</h3>
<span class="win-icon refine-menu-icon"></span>
</a>
</header>
You can set both the .checkbox and .refine-menu-collapse to be display: inline-block and that should be enough to do what you need. It may be a good idea to wrap them both in a div though in case this causes some unexpected behaviour to other elements around 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>