A very simple problem,
I want all my button to take 90 % of the width of my columns in ionic 2, and not be dependent of the text inside
.button-pink {
color: #F63566;
background-color: white;
text-transform: uppercase;
font-size: 75%;
border: 2px solid #F63566;
padding: 6% 23%;
margin: auto;
white-space: nowrap;
text-align: center;
font-family: "SanFranciscoText-Regular";
font-weight: bold;
letter-spacing: 0.3em;
}
here is my button css, i can't manage to make them fit the width of the column, and not be dependent of the text (if i change the text inside my button, the size is changing, and i don't want that)
Thank you in advance and good day to everyone !
You need to set the width of the button in your CSS.
.button-pink {
width: 90%;
}
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 have a sales page here: http://salesautopilot.s3.amazonaws.com/newsletter/letter/nl57825/ns103923/subscribe.html
My problem is when I view the site on mobile, the text in the blue call to action button overflows the button.
How should I modify the button's CSS so it won't?
I think this is the part of the CSS code that defines the button:
.mmform-container div.submitcontainer a.submitbutton,.mmform-container button.mmform-event-button,.mmform-container div.submitcontainer button.submitbutton {
background-color: #208dda;
border: none;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.8px;
margin: 0 auto;
padding: 15px 0;
/*width: 70%;*/
min-height: 20px;
color: #fff;
text-align: center;
display: block;
text-decoration: none;
width: 70%;
}
Thank you guys
David
Your problem is that the last word is too long that with fixed font size and width it doesn't fit in one line. You could use word-wrap: break-word; to break that word, but then it's kinda ugly.
Imo best scenario would be to either:
reduce the text in the button (to just 'register') or
decrease the font size for smaller screens. For that you can use CSS media query.
if you just edit that way :
#media (max-width: 640px){
.submitcontainer a{
width:100%!important;
}
I created an HTML 5 form where my legends all have background colors. My aim, which is accomplished in FireFox, Google Chrome, IE 9>, is to have text then background color extend the width of the page. The problem however is that in IE8 and lower versions it only extends to the end of the words. This is what I have so far CSS wise for my regular page:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
display: block;
color: white;
background-color: #A70C1E;
width: 95%;
padding-left: 7px;
}
May I have some insight on how to make the necessary adjustments for IE8
I just used a padding:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
color: white;
background-color: #A70C1E;
width: 80px !Important;
padding-right: 650px !important;
display: block;
}
.FormArea legend span
{
width:100%;
}
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;
}