I am trying to design a nav-bar using flex-box. I have three div and whenever the browser shrinks, I want to reduce the spacing between the icons inside header__centerclass.
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
padding: 15px 20px;
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 30px;
cursor: pointer;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center d-none d-xl-flex d-md-flex">
<div class="header__option">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>
What is the best way to still place those icons in the center and reduce the spacing? or is there any easy way to handle using the bootstrap 4 classes?
And the div is only visible in xl md devices.
Measure your padding property in units of vw, not px.
This represents a fraction of the viewport/window/tab width.
Related
I made this card to display an image and info but there is a gap I can't remove using css
Here is the style and html
.card-container>* {
width: auto;
height: auto;
margin: 0;
}
.ratings {
display: flex;
align-items: center;
background-color: aqua;
width: auto;
height: fit-content;
}
.card-container img {
width: 240px;
height: 350px;
object-fit: cover;
}
.card-container .stausbg {
background-color: aqua;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="card-container">
<img src='https://dummyimage.com/600x400/000/fff' alt='card' />
<span class="stausbg">Sold Out</span>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<p class="no-star">5</p>
<p class="no-pp">(40)</p>
<i class="fa-solid fa-circle"></i>
<p class="country">Usa</p>
</div>
<h5 class="title">Life lessons with jake</h5>
<h6>From $200 / person</h6>
</div>
Here I have used aqua color as the background color of .ratings class. I want to remove the undefined space (margin padding) and apply my own style
That space is coming from p tag. Just remove the margin.
.ratings p {
margin: 0;
}
If you want to set all the margins of the child items in the card to zero then, instead of using the child combinator (>) just use the descendent combinator.
Quite a lot of developers use 'reset' rules to remove some of the weird, default user agent stylesheet behaviours. Here's a quick video by Kevin Powell on this topic.
.card-container * {
width: auto;
height: auto;
margin: 0;
}
.ratings {
display: flex;
align-items: center;
background-color: aqua;
width: auto;
height: fit-content;
}
.card-container img {
width: 240px;
height: 350px;
object-fit: cover;
}
.card-container .stausbg {
background-color: aqua;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="card-container">
<img src='https://dummyimage.com/600x400/000/fff' alt='card' />
<span class="stausbg">Sold Out</span>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<p class="no-star">5</p>
<p class="no-pp">(40)</p>
<i class="fa-solid fa-circle"></i>
<p class="country">Usa</p>
</div>
<h5 class="title">Life lessons with jake</h5>
<h6>From $200 / person</h6>
</div>
I want to change the style of my component to fit the content,
My component Plan.vue:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
#import "../css/Plan.css";
</style>
my stylesheet Plan.css:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
I have tried to add flex-shrink: 1, and width: fit-content to my stylesheet, but it didn't work well with me, can you please tell me how can I make my design responsive? thanks in advance.
The problem is with .plan outer div which by default will display as block, making your #planFlex stretch to its borders.
If you add the following you should find that #planFlex will just be the width of your content:
.plan {
display: flex;
justify-content: center;
}
In your specific case, you should consider removing the 80px padding on your arrow icons and let flex do the spacing for you. Assuming you want the icons to stick to the sides and your title right in the middle, just wrapped them around in some div, that did the trick for me running your project:
<div id="planFlex">
<div>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-arrow-left fa-xl"></i>
</div>
<h1 #click="addPopUp(testPopup, `Lego not in the right place`)">Plan</h1>
<div>
<i class="fa-solid fa-arrow-right fa-xl"></i>
<i class="fa-solid fa-robot fa-xl"></i>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to make this as an example to learn:
https://i.ibb.co/m4qJmQz/image.png
my code doesn't center the boxes.How can I make it better?
I want to learn how to
**center vertically the columns' content
**add space between gray ">" and texts - apply space-around or space-between 's space amount, so apply automatic space; not padding or margin
my html file:
http://elementor.help.helvatica.com/flexbox.html
code:
<html>
<head>
<title>The Flexbox Example - Murat Deniz</title>
<meta content="">
<style></style>
</head>
<body>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.icon {
background-color: gray;
color: saddlebrown;
width: 100%;
text-align: center;
height: fit-content;
}
.sub-container {
border-color: gainsboro;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 30px 0px gainsboro;
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
}
li {
flex-direction: row;
display: flex;
}
ul {
padding-inline-start: unset;
}
.inline {
flex-direction: row;
display: flex;
}
.inline li:nth-child(3) {
align-content: flex-end;
color: red;
}
.main-container {
/** display: flex;
justify-content: space-around;
align-items: center; **/
height: 50%;
}
.section {
height: 100%;
}
</style>
<div class="main-container">
<div class="container">
<div class="section">
<p>Artboard</p>
<div class="sub-container">
<ul>
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
<li>
<div class="icon">
</div>
<div class="text">
photo
</div>
</li>
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
</ul>
</div>
</div>
<div class="section">
<p>Artboard Copy</p>
<div class="sub-container">
<ul class="inline">
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
<li>
<div class="icon">
</div>
<div class="text">
photo
</div>
</li>
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
<li>
<div class="icon">
>
</div>
<div class="text">
video
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I think you can't put in-between space without using margin or padding as you are using 100% width. When you talk about automatic space you mean to use relative units of measure like .em or .vw
I have icon with list of numbers to the left of icon
<div>
<i id=ico class='icon icon-2x icon-phone'></i>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
Here is the css
div {
border: 1px solid #ccc;
display: inline-block;
margin: 60px;
padding: 4px;
}
.text {
margin-left: 15px;
}
#ico {
vertical-align: middle;
}
But, I have this result,
And, I want to achieve this result using css. To center the icon beside the numbers.
Here is my jsfiddle -> http://jsfiddle.net/F3KyK/1224/
The display: flex property works for you.
http://jsfiddle.net/Sampath_Madhuranga/F3KyK/1264/
div.wrapper {
display: flex;
align-items: center;
padding: 4px;
}
.text {
margin-left: 15px;
}
/* #ico {
vertical-align: middle;
} */
.icon-box {
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class="wrapper">
<i id=ico class='icon icon-2x icon-phone'></i>
<div class="icon-box">
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
This can be accomplished with flexbox:
.container {
display: flex;
align-items: center;
margin: 40px;
padding: 4px;
}
.text {
margin-left: 15px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class='container'>
<i id=ico class='icon icon-2x icon-phone'></i>
<div class="list">
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
You can wrap the phone number spans in a div, then give that div and the icon display: table-cell:
div {
display: inline-block;
margin: 40px;
padding: 4px;
}
.text {
margin-left: 15px;
}
#ico {
vertical-align: middle;
display: table-cell;
}
div>div {
display: table-cell;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div>
<i id=ico class='icon icon-2x icon-phone'></i>
<div>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 6 years ago.
I have problems with inconsistent looks between Chrome and Firefox. To my surprise, even after using reset.css I still have the same problems; it's like Firefox is not using any of the padding that are set in "%", if I set the padding in pixels then it does work.
W3 validator came out clean.
My problem:
Right side is Firefox, and that's after using reset.
This is the style of the div:
.hobbies {
text-align: center;
width: 100%;
height: 100%;
padding: 5% 10% 15% 10%;
background: #66B9BF;
color: #373737;
}
In Chrome, the padding is what stretches the div, but that's not happening in Firefox.
.me-wrap {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
padding: 3%;
background: #373737;
}
.hobby-title {
margin-bottom: 5%;
}
.hobbies {
text-align: center;
width: 100%;
height: 100%;
padding: 5% 10% 15% 10%;
background: #66B9BF;
}
.hobbies-icons{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
.icon {
font-size: 45px;
width: 80px;
height: 80px;
background-color: #373737;
border-radius: 100%;
line-height: 80px;
}
.icon-text {
font-size: 16px;
line-height: initial;
margin-bottom: 2%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="me-wrap">
<div class="hobbies">
<h1 class="hobby-title"> Hobbies/Interests </h1>
<div class="hobbies-icons">
<div class="icon"> <i class="fa fa-paw" aria-hidden="true"></i>
<p class="icon-text"> Animal lover </p>
</div>
<div class="icon"> <i class="fa fa-code" aria-hidden="true"></i>
<p class="icon-text"> Code enthusiast </p>
</div>
<div class="icon"> <i class="fa fa-bicycle" aria-hidden="true"></i>
<p class="icon-text"> Exercise practicioner </p>
</div>
<div class="icon"> <i class="fa fa-gamepad" aria-hidden="true"></i>
<p class="icon-text"> Videogame aficionado </p>
</div>
<div class="icon"> <i class="fa fa-hand-spock-o" aria-hidden="true"></i>
<p class="icon-text"> Geek culture adherent </p>
</div>
<div class="icon"> <i class="fa fa-leaf" aria-hidden="true"></i>
<p class="icon-text"> Outdoor nut </p>
</div>
</div>
</div>
</div>
This appears to be an issue that could be resolved by using an overflow: hidden; on the container that has the blue background and the fat grey border. Rather than being an issue with the hobbies class itself, it appears to be a problem with one of the parent containers. As one of the other commenters said, please post a bit more code and we can probably help out more.