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
Related
I try to remove padding between two span elements which is not working, i did padding and margin set to 0px but didn't work
span {
padding: 0px;
margin: 0px;
}
somehow div container occupies some default padding which creates problem, someone can help to solve this issue
http://jsfiddle.net/f30boLhu/
here i want to remove black marked space between two texts
you can play with line-height or add a height to .bonus
.bonus {
font-size: 1.4em;
display: block;
height: 20px;
}
Try to add some style with existing code for your second span whose having promise class, See below CSS code -
Or try this JSFiddle
CSS Code-
.promise {
position: relative;
top: -10px;
}
Try to put span tags together like:
<span>one</span><span>two</span>
Without any separate between them
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;
}
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).
html:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.
This is due to the margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
You can find further information also on w3c site.
Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]
So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.
It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.
If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.
h1 { padding: 0; margin: 0; }
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}
set h1 margin to 0
h1 {
margin: 0;
}
It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px
<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.
You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.