I want to create something like this in a layout where the icon line themselves up with html, how can i get this done?
Layout i would like to create
I Tried the following without flexbox, but when the width gets to narrow it messes up. guess i should try the flexbox instead., hope that will work.
good version
messed up version
.pageColumnMid{
margin-right:20px;
float : left;
clear : none;
height : auto;
width : auto;
}
.pageColumnLeft{
text-align:left;
float : left;
clear : none;
height : auto;
width : auto;
}
.pageColumnRight{
margin-left:20px;
float : left;
clear : none;
height : auto;
width : auto;
}
.lineheight50{
line-height: 40px!important;
}
<body>
<div><div>
<div class="pageColumnMid"><span class="fas fa-user lineheight50" ></span> <br> <span class="fas fa-user lineheight50" ></span> <br> <span class="fas fa-user lineheight50" ></span> <br>
</div>
<div class="pageColumnLeft lineheight50" >View, manage and publish your personal data <br> View, manage and store your Contacts <br> View your technicaldata* <br>
</div>
<div class="pageColumnRight"></span><span class="fas fa-info lineheight50" ></span> <br> <span class="fas fa-info lineheight50" ></span> <br> <span class="fas fa-info lineheight50" ></span> <br>
</div>
</div>
</body>
To achieve your design this is what you can do as shown below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.d-flex {
display: flex;
flex-wrap: wrap;
padding: 1rem;
flex-direction: column;
width: 100%;/*can edit as per requirement*/
}
.d-flex .col .child {
display: flex;
flex-wrap: wrap;
}
.d-flex .col {
display: flex;
flex-wrap: wrap;
padding: 1rem 0;
justify-content: space-between;
}
.d-flex p {
padding: 0 1rem;
}
<!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="d-flex">
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View, manage and publish your personal data</p>
</div>
<span class="fas fa-info"></span>
</div>
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View, manage and store your Contacts</p>
</div>
<span class="fas fa-info"></span>
</div>
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View your technicaldata*</p>
</div>
<span class="fas fa-info"></span>
</div>
</div>
You should learn about Flex in CSS
By using these attributes you'll get what you want...
display: flex; //Flexible Box Layout
flex-wrap: wrap; // box automatically go to next line
flex-direction: column; // boxes are arranged int column order.
To play with these attributes and other also make you more clear about flex.
Thanks
Related
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>
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>
I have a problem with displaying this(check this picture)
I have a link on the left and icons with words under it on the right. What is the right way to display it? and how can I display the words under the icons? I need help with it. Please check the attached picture to see how I need it to look.
<div class="back-to-listing-clinic">
<div>
<a> < back </a>
</div>
<div class="right-icons-part">
<img class="clinic-top-icons"src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
</div>
<div>
<p> Icon1 </p>
<p> Icon2 </p>
<p> Icon3 </p>
</div>
</div>
There's a dozen ways to do this. I replaced your images with icons for demonstration purposes.
This method just sets the "left and right" parts to display: inline-block to place them next to each other, and then sets float: right on the right hand ones to separate them.
I'd consider using a CSS Framework of some kind instead - but this would be a simple way to do it with what you have.
No Framework:
* {
box-sizing: border-box;
}
.back-to-listing-clinic > div {
display: inline-block;
}
.right-icons-part {
float: right;
}
.right-icons-part:after {
content: " ";
display: block;
clear: both;
height: 0px;
}
.right-icons-part a {
text-align: center;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="back-to-listing-clinic">
<div class="left">
<a> < back </a>
</div>
<div class="right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>
Super simple Ungrid framework
#media (min-width: 30em) {
.row { width: 100%; display: table; table-layout: fixed; }
.col { display: table-cell; }
}
.right {
text-align: right;
}
.right-icons-part a {
display: inline-block;
text-align: center;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="row back-to-listing-clinic">
<div class="col left">
<a> < back </a>
</div>
<div class="col right right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>
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'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle