Im using google places api for a place autocomplete search - the user starts typing and results pop up.
I've styled the google container using !important to override the styles. So for my desktop css through media queries I have something like:
bottom: 100px !important;
top: auto !important;
Now on my mobile css, again through media queries, I need to move the position, I need the default styles back - the styles are controlled via google in the style tag on the element. But as I have used important i cannot remove them. I have tried:
bottom: auto !important;
Which fixes the bottom position, but how can I remove the top position so that it defaults to what is in the style tag on the element. I've tried:
top: auto !important;
top: inherit !important;
But with no luck.
Using that many !important 's is messy.
A few suggestions: (based on the little code your showing)
2. Don't override an :auto with an :auto. Try to override the styles with a number that give you similar look as :auto
3. Try removing all !important s and call the unique CSS within their perspective media query resolutions, properly. eg.
#media screen and (min-width:320px) and (max-width:480){
... // Your unique styles to Mobile Here
}
4. If all else fails; though, don't know why it would. You can .toggleClass with jQuery to attach a class within a condition. And .removeClass whenever you want. A simple fiddle of .toggleClass (demo) here.
But you really should just be able to clean up your CSS and put everything in their specific media query defined resolutions.
You should be able to do this by increasing specificity on your mobile css file and adding an !important value to this new value in the mobile stylesheet.
I'm not sure of your structure without seeing your html but if you can add an additional class or id to the parent container/element that is specific to mobile css and use that to target your mobile view
for example
#mymobile .classtooverride {newstyles !important;}
Related
I am using Wordpress and WPbakery. I have set a full-width, full-height background. But currently the background-position is set to centred with '!important' assigned as I see in the developer tools.
I want to set it to 'top'. I edited in developer tools in chrome and I achieved the desired effect. However I'm not sure how to make the changes permanent. I have tried copy pasting what I saw in the developer tools into the custom css field and editing it to 'top' but it wont override the theme. How do i go about it?
This is the current code seen in developer tools:
.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Not sure in which order custom styles and the default CSS of the theme are output … try increasing the specificity of your selector, f.e. like html .vc_custom_1551104319445 or .vc_custom_1551104319445.vc_custom_1551104319445
When multiple CSS rules apply to an element and try to specify values for the same properties, it becomes a matter of specificity, which one “wins”.
Here are a few resources on that topic:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specificity.keegan.st/
So if you try to overwrite something using the exact same selector you took from the WP/themes styles, it becomes simply a matter of order. Do the WP styles get embedded last? Then they win, otherwise yours would.
A simple way around that, is to increase the specificity of your selector. Selecting elements of this class on the additional “condition” that are descendants of the html element is one way to do that. Or to repeat the class name, so that .foobar becomes .foobar.foobar … and lots of other possible ways.
You need to see which file is producing the code. For instance -
After you know which file is responsible for the code, then you go to the site directory and implement the file in question.
I wouldn't suggest using the vc_ number selector. Best to use or even better add a custom selector on the row or element itself and then apply the following CSS.
.has-bgimg-right.vc_row-has-fill{
background-position:center right !important;
}
What ends up happening if you use the vc_ number selector is if you or your client go to update that field the vc number will change and you will be shaking your head. So create a custom selector class and use the vc_row-has-fill which will never change.
I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.
I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.
What is this, and why does it have the values that it has?
element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.
That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).
element.style refers to inline styles on the dom element. For example:
<p style="color:#cc0000;">Foo</p>
the color of that paragraph would show up under element.style.
You can fix with your css by doing this:
#popUpDiv[style]{
left:610px !important;
top:0px !important;
}
HTH
-Ted
That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).
Look for javascript code that changes the display, top and left properties of #popupDiv
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
Given the following HTML code generated by a Google+ widget
<div id="widget_bounds" class="Yfd" style="width: 290px;">
What should I declare in my style sheet to override the width to be 100%
I have tried the following
Corrected typo
#widget_bounds, #widget_bounds .Yfd, #widget_bounds .Yfd[style], #widget_bounds[style], .Yfd{
width:100% !important;
}
and various combinations of to no avail.
Other options I have tried are
#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
width:100% !important;
}
#widget_bounds .Yfd[style]{
width:100% !important;
}
#widget_bounds{
width:100% !important;
}
.Yfd[style]{
width:100% !important;
}
From reading some comments I think the point has been missed that the HTML has been generated from a Google+ widget for which I only have the option to set pixel widths. I have a responsive designed website and I need to override the inline style to provide percentage widths.
Rather than down voting and voting to close a perfectly legitimate question I would appreciate it if someone is actually able to answer a difficult question.
update
As mentioned by #niels-keurentjes:
There are a few cases where an inline style can be over-ridden, such
as with the !important attribute or with user style sheets.
style="width: 290px;" is an inline style.
from http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm:
Inline styles have the highest precedence. That means they are going
to be applied no matter what. The only styles that have higher
precedence than inline styles are user styles applied by the readers
themselves.
For more about the cascade: http://www.w3.org/TR/CSS2/cascade.html
For this reason you can't overwrite it with CSS alternative use jQuery to reset this width:
$('#widget_bounds').ccs('width','100%');
The following one :
#widget_bounds{
width : 100%;
}
Better not to use !important cause it breaks the natural cascading in the stylesheets.
P.S. You should check the spelling. The id is named widget_bounds which is different than widet_bounds from your css definition.
It turns out that I was on the right tracks but it is impossible to have a Google+ widget that has a responsive design, The closest I could get to is having fixed width px values for different sized view ports.
An interesting discussion on this can be found here https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x for anyone looking for a solution to this.
I am currently working on a highly design orientated site based on wordpress CMS.
Currently I have a responsive main stylesheet linked externally for the core css. As the site relies heavily on spacing and alignments of both text and images it has become necessary to add inline css using style= HTML to sometimes override the external CSS.
The problem I have is that in most cases certain elements such as margins need to be a different percentage in the mobile view than the desktop view to balance the visual composition. Is there any way to add responsiveness to the inline CSS based on screen width as can be done in an external style sheet?
So far the only way I can think of achieving this is through jQuery amending the external CSS based on the users screen width however this would mean setting up strict rules in the JS eg: for desktop view having margins set at 70% and for mobile setting them to 90%.
If it could be possible to do this inline using html style then this would give my client stricter control and more flexibility. Luckily my client is well versed in CSS.
You could always add a block of css inline with a style element:
<style type="text/css">
#media screen and (min-width:800px) {
.inlineOverride {
/* add more styles here */
}
}
</style>
<div class="inlineOverride">
</div>
It's worth mentioning that HTML5 has introduced a scoped attribute that you can set on the style element to limit the specified style information to the style element's parent element, and that element's descendants.
It isn't widely supported yet, so shouldn't be relied on, but it could be useful in the long term to help prevent inline styles like this from "leaking" into other parts of the document.
This question/answer might be helpful for you(read it thoroughly)
use #media for adjusting your properties of css according to device width-height.
What does #media screen and (max-width: 1024px) mean in CSS?
In modern Browsers you can (kind of) archive this by using custom css properties (css variables):
#media (max-width: 1100px) {
* {
color: var(--color-sm)
}
}
<a style="--color-sm: #11f">Text</a>
(Expand Snippet or open in full page to get the other behavior)
(Color is used for simplicity of presentation, just use margin or any other css property according to your use case.)
My question is about background-images. I was designing a home page for iPhone screen and I wanted to use a slightly different image for the mobile version. My media query was not in a separate css file, just embedded in the index.html. Problem...the main css image was overriding my query image. I checked for extra brackets etc. I thought the media queries had precedence over the main css? Would I have got my desired result if I had put the Media query in a css link file?
Here is my main css code:
#container
{
background-image:url(images/1000_framec.jpg);
background-repeat:no-repeat;
width:999px;
height:980px;
margin:0 auto;
}
and below is my media-query code:
#media only screen and max-width 320px {
#container
{
width:98%;
background:url(images/1000_frameo.jpg) no repeat left;
margin-top:80px;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
}
}
Media queries and #media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a #media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.
The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.