In this site http://rgdev.realtyguard.com/ In "Find your dream home!" section I am having problem with dropdown which is cut down when I click on it.
I would like to see the div above the main div.
Find out the following attachment
Please help.
Thanks.
There is a padding and margin on ul.chosen-results which means that the items dont reach the edge. To remove this all you have to do is add this to your css:
.chosen-results {
padding: 0;
margin: 0;
}
You can set margin-right: 0 to:
#ihf-main-container ul,
#ihf-main-container ol {
margin-top: 0;
margin-bottom: 10px;
margin-right: 0;/*add margin right 0*/
}
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
Trying to add right margin for the drop down item to the last menu item.
Here is the menu:
https://jsfiddle.net/5tymk7o4/11/
Here s what I'd like to get:
Here is what I have tried:
.dropdown-menu {
right: 0;
/* or */
margin-right: 0px;
}
both didn't work well
I have also tried to
1. add right margin to UL
2. to make UL relative and add right: o to LI...
all in vain...
I swear I have searched for a good while before posting this question.
thanks!
As mentioned in previous answers, you can use right: 0 for that particular item.
To avoid targeting other menu items, use this selector:
#menue .menu-item:last-child .dropdown-menu {
right: 0;
left: initial;
margin-right: auto !important; /* Only if you can't delete the inline margin-right applied to this element */
}
This will apply the css only to the the dropdown menu inside the last menu item, leaving the alignment of the rest as is.
Replace the inline margin-right: 1200px on the ul for the last menu item with:
left: auto; right: 0;
If you add right: 0, left must be auto to work how you want
.dropdown-menu {
left: auto;
right: 0;
}
My anchor link is in the footer, and when it's clicked, scrolls to an anchor in the middle of the page. The problem is that even though I've added padding to the anchor, the anchor is still flush with the top of the browser. The padding just isn't gripping anything, if that makes sense. I can see the padding expand beyond the div the anchor is contained in when I "Inspect".
What am I missing?
CSS
<style>
.anchor-link {
margin: -90px 0 0;
padding: 90px 0 0;
display:block;
}
</style>
HTML
<div class="anchor">
<h2>
<a name="A" class="anchor-link">This is the anchor</a>
</h2>
</div>
You know, it happens that as soon as you seek out help, you find the answer. I really do appreciate your contribution and help though, guys.
In short, the div that surrounded the anchor was set to "overflow-y:hidden;". I changed this to "overflow-y:visible" and the padding for the anchor works now.
I've included a fiddle that shows the problem area: https://jsfiddle.net/uj9bfysk/1/
Check your margin and padding... is there a reason they seemingly cancel each other out? One is 90, the other is -90.
.anchor-link {
margin: -90px 0 0;
padding: 90px 0 0;
display:block;
position:relative
}
Try this one :
.anchor-link {
margin: 0;
padding: 0;
display: inline-block;
}
If you want to add padding above and below link just set padding on h2 tag.
.anchor h2 {
padding: 10px 0;
}
Hope it works..
Im doing this web with Wordpress and one theme but i have a problem with a transition to the submenus.
If you can check the "QUÉ HACEMOS" submenu, you will see that when i try to click on an element of submenú if imposible by the margin top, do you understand ?
If i delete the 38px margin top of sub-menu class no problem, but I need that the submenú start and header border but i have this problem that i cant fix, please help.
Thanks a lot.
Find the following definitions in your CSS and edit respectively
.main-nav > li > a {
margin: 0px;
padding: 37px 25px;
}
li:not(.dt-mega-menu) .sub-nav {
width: 280px;
margin-top: 1px;
background: #043349;
}
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.