community,
I have a question regarding the CSS styling of MailChimp's "Submit"-Button. So far I managed to change the colour and font of my button using CSS.
I wanted to change the padding and margin of my Submit button, but after trying different "margin/padding"-combinations and just experimenting inside Google Chrome's DevTools I cannot find a solution to this: It seems like the button is cut off if I increase the padding.
Screenshot 1 is how it looks right now, screenshot 2 is what happens if I increase the top/bottom-padding from 0 to 20px.
This is what I used in my Custom-CSS to change the font, colour etc:
#mc_embed_signup .button {
background-color: #d1e5e6 !important;
color: #000000 !important;
border-radius: 0 !important;
border: none !important;
font: 16px, bebas_neue, Helvetica,Arial,sans-serif !important;
font-weight: bold !important;
padding-left: 40px !important;
padding-right: 40px !important;
padding-bottom: 13px !important;
}
And this is the HTML for the submit button:
<div style="text-align: center !important;"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
I hope someone out there can help me with this curious issue. I would like that all buttons are the same size (for consistency) but I already struggle with changing the "read more" button for post grids. Hope I can at least adjust the submit button so it doesn't look too off. This one is just too skinny.
Thanks!
You are using the important keyword in #mc_embed_signup .button. The padding-bottom is one of them
#mc_embed_signup .button {
font-weight: bold !important;
padding-left: 40px !important;
padding-right: 40px !important;
padding-bottom: 13px !important;
}
This is why when you set padding-top and padding-bottom the text is cut-off. Simply, the padding-bottom is not applied. You can either git rid of the important keyword, which I strongly recommend, or use the important keyword with additional specificity rules.
Edit
After removing the important keyword, you can set a height for your button as follows
#mc_embed_signup .button {
height: 30px;
}
Try to experiment whether you need the !important keyword for it. Try to avoid it as possible
You can also use padding-top and -bottom; for instance as below. Make sure to use auto height. Otherwise, you will need to set uneven values for your paddings; i.e 20 for top and 40 for bottom
#mc_embed_signup .button {
padding-top: 17px;
padding-bottom: 17px;
height: auto;
}
Update addition css with this:
#mc_embed_signup .button {
height: 45px !important;
}
Related
I have an angular project where I'm using Angular Material and material table.
It seems that all the text in my table has the 10px margin top and bottom applied due to a class named something like: .ng-tns-c5-1 or .ng-tns-c6-1 etc.
I can't find a way to change those margins without inspecting element, finding that class and then using CSS to change that margin.
But after some changes to other elements on the app, the .ng-tns-c6-1 (for example) is changed to something like: .ng-tns-c4-0 and then I have to change that. The problem is I've done this 5-6 times now and it's a complete pain.
Because of that the table has a lot of useless white space and just overall makes things look bad.
What is that class and what can I do to make sure the margin remains at the 2-3px I'm setting?
This is the type of thing I have in my CSS:
.ng-tns-c5-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c5-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c6-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c4-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
You can use the following to select all the current and future elements.
[id*='ng-tns-c'] {
}
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
I am trying to get rid of the gap in the middle of my page. I have tried multiple things such as setting my .offer css to
.offer {
background-color: #f7f7f7;
padding:0 4px 4px;
}
But nothing happens.
http://codepen.io/anon/pen/RNLyZp
Remove the margin-bottom: 30px from the .jumbotron css.
Or do this:
.jumbotron {
padding-bottom: 0;
margin-bottom: 0 !important;
}
I think you set the .jumbotron margin-bottom to 0
Attention to responsive media queries :)
remove the margin-bottom from jumbotron class. avoid using !important as you might need to override your style
I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size.
I'm thinking of having a horizontal form with labels and textboxs and submit button having a text size of 72px.
Is there anywhere I can get more information on how to scale everything accordingly or can anyone give me some tips?
What I was trying is:
input.real-large-input {
font-size: 24px;
padding: 14px 24px;
width:270px;
line-height:46px;
}
label.real-large-label {
font-size: 24px;
line-height:46px;
font-weight:bold;
}
.real-large-btn {
font-size: 24px;
padding: 14px 24px;
}
But the line-height and padding are really just kind of made up, I don't know what values to use to keep it all to scale with the original. Actually quite confused by the original bootstrap CSS as it has something like 14px font-size, padding of 4px for top and bottom, but a line-height of 20px, doesn't add up.
The above works sort of fine at these values, but the issue is I want to scale much larger than this but it all gets really messy as I don't know what values I should be putting for padding and line-height when font-size is 72px.
Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large:
http://jsfiddle.net/fpC4r/3/show/
.form-large{
font-size: 60px;
}
.form-large .control-label{
padding-top: 20px;
padding-bottom: 20px;
line-height: normal;
}
.form-large input, .form-large button{
font-size: 60px;
padding: 20px;
height: auto;
line-height: normal;
}