I've a small problem with text-align of my button.
Here's the button itself:
It has same padding:
But, the link itself gives extra height, not 2.3rem how I ask it to.
You can see that highlighted link gives extra space at the bottom, it's not centrelized.
Maybe someone know how to fix it?
Html:
Proceed to the Brief
SCSS:
.btn{
&,
&:link,
&:visited{
color: $color-white;
cursor: pointer;
border: none;
border-radius: $border-radius-medium;
background-color: $color-candy;
display: inline-block;
padding: 1.5rem 5rem;
font-size: 2.3rem;
#include FilsonProRegular;
text-align: center;
text-transform: uppercase;
transition: all .2s;
white-space: nowrap;
#include respond(tab-port){
padding: 1.5rem 4rem;
}
#include respond(phone){
width: 100%;
}
}
}
As #TemaniAfif said, that space is for the descender that certain characters like jpQç3 etc have. And you seem to be using a custom font with rather large descenders.
See explanation on fonts.com.
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}