On this page http://pjstagingdecorating.com/home-staging-level-2/ when I resize the browser to simulate a narrow screen, there is a large space between each row. I think it is because the containers are each set to a height of 418px. I have used the following CSS to change the height of the containers to auto but it's not working. Thanks for your help.
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1 {
height:auto!important;
}
remove the inline style style="height: 444px;" from div with
class="dtp-item-block"
You can reduce the gap by targeting it with the cleaner syntax like below.
.dt_portfolio_grid_6 {
height: auto !important;
}
If you are facing the same issue on other pages, you can reduce the usage of resetting height to all grids by targeting .dtp-item-block if it is used in those pages too.
Setting the height: auto on the dtp-item-block itself did the trick for me.
.dtp-item-block {
height: auto;
}
I applied it on the dtp-item-block, but you can also be more specific. I tried it in Stylebot (Chrome extension) and did not need the !important, but that might be because it's the extension.
You have a css selector named '1', that's not correct according to the CSS standards. CSS selectors must NOT start with a digit, that said, this selector:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
does nothing, but this should do the trick:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.omega {
height:auto!important;
}
More info here: http://www.w3.org/TR/CSS21/syndata.html#characters
Related
I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.
It seems impossible to override the CSS of the <body> tag of an EmberJS application.
It inherits the ember-application class, and this has many of the browsers default values, including a margin of 8px.
I want to get rid of this margin around <body>, but none of these two methods worked:
body {
margin: 0;
}
body.ember-application {
margin: 0;
}
!important does not help either.
Any idea of what I could do? Removing the body tag itself do not work, as Ember will add one.
The ember-application class has no css associated with it and just putting in
body {
margin: 0;
}
is enough to handle it. It's likely you have another CSS element winning the CSS war, or you have an inside element pushing the padding making it appear so.
Example of margin 0 working: http://emberjs.jsbin.com/vaquhuwo/1/edit
The recaptcha i'm using have a built-in css of
#recaptcha_area, #recaptcha_table {
width: 318px !important;
}
I see this when I use firebug.
My problem is
how can I override the built-in width? I've tried to place css code on my stylesheet like
#recaptcha_area, #recaptcha_table {
width: 207px !important;
}
but it doesn't work. Is there other way to override?
You should avoid using !important to override things.
You can't tell the recaptcha what it's width should be; however, you can specify a maximum width instead:
#recaptcha_area, #recaptcha_table {
max-width: 207px;
}
Note thought this might break the recaptcha area.
I have a css file with this style:
.filefield-element .widget-edit {max-width: 70%;}
I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:
.filefield-element .widget-edit {max-width: 99%;}
In the "html/styles" pane, I see that the styles are listed in the correct order:
.filefield-element .widget-edit {
max-width: 99%;
}
.filefield-element .widget-edit {
float: left;
max-width: 70%;
}
However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.
Is there a way to override a max-width value with a larger (less restrictive) value?
You can override (unset) max-width with
.foo{ max-width:none; }
... to clear any inherited max-width.
Try using !important, or selector with higher specificity.
Example:
max-width: none !important;
This is a specificity issue. Take a look at http://htmldog.com/guides/cssadvanced/specificity/.
Basically, you need to make one more specific than the other. Put the containing element before .filefield-element .widget-edit and it will be overridden
Use JavaScript to set max-width to none first, then reassign a new value.
I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:
It automatically adds a style attribute to the html tag whose value includes:
height: 100%
This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.
Is there any way to prevent or fix this?
This resolves the issue:
/* Google Translate Overrides */
html, body{
min-height: 0!important;
height: auto!important;
position: inherit!important;
}
I was able to solve this by setting the body min-height attribute in css as !important to prevent override.
body {
min-height: 0 !important;
}
UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.
The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.
This should work:
html {
height: auto !important;
}
body {
position: initial !important;
min-height: initial !important;
top: auto !important;
}
maybe it's like
body{ height: auto !important; }
do not write css in head part, write in a css file. this will preventing automatic translation by google.
I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.
body { position:static !important; min-height:100%; top:0; }
I found a way to solve this issue, it's not bulletproof I guess but works for now:
Plugin: http://darcyclarke.me/dev/watch/
with this code :)
$(window).load(function(){
$('body').watch('min-height', function(){
var style = parseInt($('body').css('min-height'));
if(style > 0){
$('body').css({
'min-height' : '0',
'position' : 'static',
'top' : 'none'
});
}
});
});
The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:
$(function(){
var myMinHeight = 950;
setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});
Set the value of myMinHeight to whatever you wish it to be.