I have just found out that my forms on these pages are not working.
http://www.abado.dk/modtag-tre-tilbud/
http://www.abado.dk/kontakt/
http://www.abado.dk/bliv-partner/
I really don't have any idea what is wrong.
Can anyone help me?
The issue is on your padding: 25px 15px; in .form-control
you in put height is 34px at the same time you are using padding-top(25px) + padding-bottom(25px) = 50px with in the 34px
Add this in to css properties
.form-control{
height: auto;
}
or adjust padding value
Related
i gat this situation, (WordPrsee with OceanWP Theme).
i want to change the height + padding + margin + the total height size of the nav.
i tryed use CSS in the global CSS like :
.menu-item-497 a {
height: 40px !important;
padding: 2px 20px 2px 20px; !important;
line-height: 135% !important;
}
li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-498 {
padding: 2px 20px 2px 20px; !important;
}
this does not work.
i tryed set CSS Class and add some CSS in the GLOBAL CSS Area
also tried change the custom CSS "name" in the advance tab of the all navigator and this didn't help too.
also tried to use the CSS ID too.
also tried change in the MENU tab at the appearance sub menu.
what is the proper way to change it.
when I set the value in the chrome debug mode (F12) that work.
and this work :
so - what is the way of using CSS in Wordpress and fix those prop value I want.
thanks, foreplay.
ok.
i read the https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu page
.
this explains how to see CSS Class for that item (you can set items with the same class)
after setting the class name - I goto general CSS.
there set :
.
hanibaal-Footer-MenuItem{
height: 40px !important;
/* padding: 2px 20px 2px 20px; !important; */
/* line-height: 135% !important; */
}
li.hanibaal-Footer-MenuItem.menu-item a {
padding: 5px 10px 5px 10px !important;
}
and that work.
I'm a designer not developer "so mind the question if its too basic" and i was updating my word-press version.
www.majd-design.com
After updating my word-press version i got extra margin in my inline element{},
element {
float: left;
top: auto;
right: auto;
bottom: auto;
left: auto;
margin: 0px 0px 10px 25px;
overflow: hidden;
position: relative;
width: 930px;
height: 516px;
}
Can anyone advice how can i get rid of it, as this code isnt in CSS files or in the HTML index file.
Thanks
Adding !important to the end of a css attribute declaration will tell the browser to make sense of it and not to any other declaration of the same attribute, also when the other declaration has more priority than yours (and also inline css ;)).
You can use it like this:
margin: 0px 0px 10px 25px !important;
Alter the CSS file. If it's core to a theme or WP then you can also...
Create a child theme. https://codex.wordpress.org/Child_Themes
Get a custom CSS plugin and override the CSS. https://wordpress.org/plugins/simple-custom-css/
element {
margin: 0 !important;
}
you might need to add more detail but i think its probably this section of the CSS
margin: 0px 0px 10px 25px
When its in shorthand like this it means:
top margin is 0px
right margin is 0px
bottom margin is 10px
left margin is 25px
Let me know if this solves your issue
Using javascript , you can do
document.getElementById("myDivsId").style.margin = "0";
or
document.getElementById("myDivsId").style.marginLeft = "50px";
(similarly for all 4 sides)
JsFiddle
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; }
Can someone tell me why my div brdheader isn't sitting at the top (the most top inside of, that is) of punwrap?
I'm using fluxbb, and the devtools in chrome aren't saying anything. There's no margin, or padding, so I have no idea what the problem could be.
This is the forum. Since I'm using FluxBB I can't exactly post all of the code.
http://flux.strange-coast.com/index.php
Thank you for taking the time to read this.
you have margin: 30px 0px -10px 5px on your .pun h1 that's what's doing it. Adjust that to what you want
Change your .pun h1 css line in your BSTangram.css on line 127 to the one below should fix it.
.pun h1 {
margin: 0px 0px -10px 5px;
margin-left: 5%;
padding: 0px;
}
As long as your going for this output, http://cl.ly/TGxf
If that's the case then there is your fix if not sorry I misunderstood.
I'm new to HTML & CSS. I made multiple tables and wish to display them all on one line inside a box. I tried the following but this doesn't seem to work. Can someone please fix this?
This is my CSS code:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
table{
margin-right: auto;
margin-left: auto;
float:left;
}
td,th{
padding: 20px;
}
The HTML should be correct.
Rather than using float: left, display the tables as inline by using display: inline-block
Example
Do know that this will make it so table elements won't get their default full width (which you probably don't want to begin with).
You have a few options that im aware of.
1 . If you want it pure CSS and "dynamic" (i.e. you dont know the width beforehand) you can set the table to display: inline-block and remove your float. This works in chrome, but you may have issues with IE, especially older versions.
http://jsfiddle.net/ZfX2M/
2 . If you know the width then set an inner content div with that width, and margin:auto it.
http://jsfiddle.net/AuF7z/1/
3 . if you don't know the width, but your happy to use JS, then do the same as above, but calculate the width in JS (i use jQuery as its what im used to, but you could use raw JS)
http://jsfiddle.net/mVADm/1/