I have a code as follows:
<div className="wrapper">
<i class="fa fa-quote-left" style="font-size: 10rem;"></i>
<div class="text">Title</div>
</div>
With next css:
.wrapper{
display: flex;
flex-direction: column;
border: 2px solid #f8f8f8;
}
.text{
font-size: 16px;
font-weight: 300;
margin-top: 0.25rem;
}
Why my icon takes more space than it should take.
How can I remove it?
Here is the fiddle.
not the best way but you can use line-height
for example :
i{
font-size: 10rem;
line-height: 7rem;
margin-top: 1rem;
}
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed last year.
This might be silly question but yet I am stucked here.
There is A4 size paper in which I want Company Name at the center of the page and in the same row I want WhatsApp and contact number right aligned one after another. Below is my code attached.
Thanks in advance.
.invoice-title {
font-size: 25px;
text-align: center;
font-weight: bold;
color: #CD1818;
padding-top: 10px;
}
.invoice-title small {
font-size: 12px;
text-align: right;
padding-top: 10px;
color: #262a2e;
}
<p class="invoice-title"><span>COMPANY NAME</span>
<small class="float-right"><i class="fab fa-whatsapp"></i> : 99887766655 \nCall : 5544332211</small>
</p>
It's easy with flexbox. Try this
.invoice-title{
font-size: 25px;
font-weight: bold;
color: #CD1818;
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.invoice-title span {
margin-left: auto;
}
.invoice-title small{
font-size: 12px;
text-align: right;
color: #262a2e;
margin-left: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p class="invoice-title">
<span>COMPANY NAME</span>
<small>
<i class="fab fa-whatsapp"></i> :
99887766655 <br>Call : 5544332211
</small>
</p>
You can do the following
Added a <br/> tag to add a new line on your html
Added the following styles
.invoice-title {
width: 100%;
border: 1px solid black;
font-size: 25px;
text-align: center;
position: relative;
padding: 10px;
}
.float-right {
font-size: 12px;
position: absolute;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
right: 0;
top: 0;
}
<p class="invoice-title"><span>COMPANY NAME</span>
<small class="float-right"><i class="fab fa-whatsapp"></i> : 99887766655 <br/>Call : 5544332211</small>
</p>
I'm trying to make the whole div clickable, but removing any styling that the anchor adds to the div. I cannot use JS for this.
HTML code
<a href="https://stackoverflow.com" target="_blank">
<div class="style1">
<div class="style2">
<div class="style3_">
<div>
<div class="text1">
Here is the Text 1
</div>
<span class="text2">
Here is the text 2
</span>
</div>
<a href="https://stackoverflow.com" target="_blank">
Link
</a>
</div>
</div>
</div>
</a>
CSS code:
.style1 {
padding: 16px;
}
.style2 {
border-radius: 8px;
background-color: #fff;
border: 1px solid #dadce0;
box-shadow: none
}
.style3 {
display: flex;
padding: 16px;
justify-content: space-between;
align-items: center;
}
.text1 {
line-height: 1.5rem;
font-size: 1rem;
letter-spacing: .00625rem;
font-weight: 500;
}
.text2 {
line-height: 1rem;
font-size: .75rem;
letter-spacing: .025rem;
font-weight: 400;
}
a tags usually adds an underline to indicate that it is a link, that's actually just a text decoration, to remove that you can add text-decoration: none; to whatever class you want the style to be removed, or you can add that to the anchor tag directly. See the snippet below for your reference:
.style3 {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 8px;
background-color: #fff;
border: 1px solid #dadce0;
box-shadow: none;
padding: 16px;
width: max-content;
gap: 2rem;
}
.text1 {
line-height: 1.5rem;
font-size: 1rem;
letter-spacing: .00625rem;
font-weight: 500;
}
.text2 {
line-height: 1rem;
font-size: .75rem;
letter-spacing: .025rem;
font-weight: 400;
}
a{
text-decoration: none;
color: black;
flex: 1;
height: 100%;
}
<a href="https://stackoverflow.com" target="_blank">
<div class="style3">
<div>
<div class="text1">
Here is the Text 1
</div>
<span class="text2">
Here is the text 2
</span>
</div>
<div>
Link
</div>
</div>
</a>
I have a problem with an <i> element that must be seen only in a media query. The problem is I can see everything works fine in my inspector, but despite <i> takes the right font-size, and takes the right space, it doesn't take the color I gave it. The inspector even shows the right color without problems, but the element doesn't take it, it takes the background color of the section, making it impossible to be seen.
The one I want to show in the media query is id="footer-left-options", the other two above not.
Here some code to help
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: white;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
.footer-icon-left>i {
display: none;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
The problem is the font-weight, since the <i> inherited the font-weight:500 from the previous rule:
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
Thanks to this site https://www.amp-blogger.com/2019/01/font-awesome-5-not-working-on-css.html I've found the answer. The <i> I've token from Font Awesome was this https://fontawesome.com/icons/ellipsis-h?style=solid and opening the link you can see that the icon is described as "solid" and has two pro version both in "regular" and "light" font-weight. Now, since 500 isn't solid (bold), the icon took the color I wanted for it, but didn't display at all! Changing font-weight to font-weight:800 solves the problem, the icon shows itself regularly and the color is correct.
Thanks everybody for the help!
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: red;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
I have a slider, and text inside it, and I need to make this text responsive. I mean in computer version it looks like as I want, but in mobile version it shifts and I can`t see my icons under each other.
css:
.sliderr__item .slid{
display: flex;
flex-direction: column;
width: 100%;
margin-left: 50px;
margin-top: 50px;
text-align: left;
align-items: flex-start;
justify-content: flex-start;
}
/*END*/
.sliderr {
background-color: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.sliderr__wrapper {
display: flex;
transition: transform 0.6s ease;
/* ADDED: */
margin-bottom: 10px;
}
.sliderr__item {
flex: 0 0 50%;
}
.sliderr .date {
display: inline-block;
margin-left: 1em;
}
/* Added: */
.sliderr__controls {
display: flex;
justify-content: center;
flex-flow: row;
}
.sliderr__control {
/* Added: */
border-radius: 50%;
/* Updated: */
position: relative;
top: 0;
width: 25px;
/* The Same: */
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
height: 25px;
background: #5FA467;
/*
REMOVED: transform: translateY(-50%);
*/
}
html:
<div class="sliderr"><br>
<div class="sliderr__wrapper">
<div class="sliderr__item" style="border: 1px solid #DCE2EC;">
<div style="height: 150px;" class="slid">
<p style="font-family: Roboto; font-size: 14px; color: #5FA467;">My first text</p><br>
<p style="font-family: Roboto; font-size: 16px; color: #000; font-weight: bold;">My second text</p><br>
<p style="display: inline-block; font-family: Roboto; font-size: 14px; color: #000;"><img src="https://via.placeholder.com/20" style="width: 18px; height: 18px;"><span>My User</span><img src="https://via.placeholder.com/20" style="margin-left: 20px;"> 21.08.2018</p>
</div>
</div>
<div class="sliderr__item" style="border: 1px solid #DCE2EC;">
<div style="height: 150px;" class="slid">
<p style="font-family: Roboto; font-size: 14px; color: #5FA467;">My first text</p><br>
<p style="font-family: Roboto; font-size: 16px; color: #000; font-weight: bold;">My second text</p><br>
<p style="display: inline-block; font-family: Roboto; font-size: 14px; color: #000;"><img src="https://via.placeholder.com/20" style="width: 18px; height: 18px;"><span>My User</span><img src="https://via.placeholder.com/20" style="margin-left: 20px;"> 21.08.2018</p>
</div>
</div>
</div>
</div>
So, I have 3 paragraph of text and in mobile version I need to see them in the center and under each other and icons need to be under each others with their text. How can I make that? Full sample in this JSFiddle https://jsfiddle.net/ofzpnL2k/4/
You can use CSS media queries to achieve different stylink for mobile. It's like if conditionals for CSS.
Here you can find more explanation about it: https://www.w3schools.com/csSref/css3_pr_mediaquery.asp.
I'm having a box element with an icon (using font awesome icon "fa-video-icon") and text heading "Video Tutorial", here it is:
<a class="box" href="http://mylinkhere"><div class="heading-icon"><i class="fa fa-video-camera"></i></div>Video Tutorials</a>
What I want to achieve is when people hover the box to display a background-image instead of the box. The box should not appear, only the background-image.
.box {
border: 1px solid #ddd;
display: inline-block;
height: 170px;
line-height: 1.1;
margin-bottom: 20px;
margin-bottom: 2rem;
margin-right: 15px;
margin-right: 1.5rem;
padding: 10px;
padding: 1rem;
position: relative;
text-align: center;
vertical-align: top;
width: 155px;
font-size: 18px;
font-size: 1.2857143rem;
font-weight: 700;
color:#222;
}
.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}
Appreciate your help!
The HTML:
<a class="box" href="http://mylinkhere">
<span class="heading-icon">
<i class="fa fa-video-camera"></i>
</span>Video Tutorials
</a>
The CSS:
.box {
display: inline-block;
height: 170px;
width: 155px;
border: 1px solid #ddd;
text-align: center;
padding:10px;
font-size: 18px;
font-weight:bold;
color:#222;
}
.box:hover {
background-image: url(http://lorempixel.com/output/food-h-g-175-190-3.jpg);
text-indent:-9999em;
}
.box:hover span {
position:absolute;
left:-9999em;
}
.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}
The fiddle.
When the box is hovered over, it sets the background image, and removes the text by indenting it off of the screen. It also moves the span, which I'm assuming shows the icon, off of the screen as well.