How to line-break 2 anchors - html

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>

Related

How to place objects in one line and distribute evenly on the screen using CSS?

could anyone share with me how to place objects in one line and distribute evenly on the screen using CSS? I'm a newcomer to web world, just trying to create own project.
I have the following html code:
section class="contact section" id="contact">
<h2 class="section__title">Contact Me</h2>
<span class="section__subtitle">Get in touch</span>
<div class="contact__container container grid">
<div>
<div class="contact__information">
<i class="fas fa-phone contact__icon"></i>
<div>
<h3 class="contact__title">Call me</h3>
<span class="contact__subtitle">+49 423 9239 23</span>
</div>
</div>
<div class="contact__information">
<i class="fa-solid fa-envelope contact__icon"></i>
<div>
<h3 class="contact__title">Email</h3>
<span class="contact__subtitle">test#gmail.com</span>
</div>
</div>
<div class="contact__information">
<i class="fa-solid fa-location-dot contact__icon"></i>
<div>
<h3 class="contact__title">Location</h3>
<span class="contact__subtitle">Hamburg, Germany</span>
</div>
</div>
</div>
</div>
</section>
</main>
.contact__information{
display: flex;
flex-direction: row;
justify-content: center;
}
My result was provided in attachments.
enter image description here
I'm using that CSS block, but it place by a column in the center. I would like to spread contact details in a human-redable format in one line (something like this, bit it changes positions when you use other screen size.
enter image description here
.contact {
display: flex;
flex-direction: column;
align-items: center;
}
.contact__container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
And the div between contact__container and contact__information is not necessary.
Add css on div child of div contact__information
<section class="contact section" id="contact" style="
/* display: flex; */
/* flex-direction: row; */
"><h2 class="section__title">Contact Me</h2><span class="section__subtitle">Get in touch</span><div class="contact__container container grid" style="
display: flex;
flex-direction: row;
"><div style="
display: flex;
flex-direction: row;
justify-content: space-evenly;
"><div class="contact__information"><i class="fas fa-phone contact__icon"></i><div><h3 class="contact__title">Call me</h3><span class="contact__subtitle">+49 423 9239 23</span></div></div><div class="contact__information"><i class="fa-solid fa-envelope contact__icon"></i><div><h3 class="contact__title">Email</h3><span class="contact__subtitle">test#gmail.com</span></div></div><div class="contact__information"><i class="fa-solid fa-location-dot contact__icon"></i><div><h3 class="contact__title">Location</h3><span class="contact__subtitle">Hamburg, Germany</span></div></div></div></div></section>

How to make that one span goes to the next line in the same div?

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>

Unequal Card size in css

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.

How to align content horizontally using Flexbox?

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

Control wrapping alignment in flexbox

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>