I've builded banner for my home page and I want to hide a few HTML element in the responsive mode. When I run it on chrome browser and then I got an issue. This is css property which has been blocked by another css class. I can't figure it out where this css class is ? Anybody can help me to give me solution?
I agree with Cheslab, I think this is inline style resulting from javascript.
css with a viewport property will show its source of the top right side of the style section in the console.
Try putting in any css file:
img.imgSGHN {display:none;}
If this doensn't make any changes, you should be able to override the inline style by adding "!important" (not recommended) in your custom style.
img.imgSGHN {display:none!important;}
will get rid of .imgSGHN element.
The best way to approach the problem would be finding the script where it creates the inline css style and changing its behavior. Simply making it not override "display: " property will do.
Related
I'm trying to override overflow for a div from hidden to visible. It's a large project and I'm trying to add some new things in this.
I'm able to apply css to the element using Inspect element console but the same thing doesn't work when adding to the file as internal stylesheet
Tried using !important as well
Please let me know what might be causing this.
Thanks in advance.
There's no reason for CSS not to work while using an internal stylesheet.
Here are two things to try, check if your class name is spelt correctly and you're using the correct selectors.
And you might have a fixed width or height which is causing the content not to be able to scroll over.
Post the code on here for more help if you can.
Mark as answer if this was helpful.
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
Pretty new to this coding stuff so forgive the ignorance :)
I'm trying to remove some inline styling from this Wordpress theme which I understand overwrites any external CSS files.
When I 'inspect element' I get the following, and changing hidden to visible on the right does work. But usually it would say like style.css:202 or whatever line of the CSS I need to change and that's how I usually do it. This time though obviously it says element.style { and I can see that style="overflow: hidden; on the left hand side (highlighted).
http://i.imgur.com/qkKHsy0.jpg
How would I go about essentially making that overflow visible?
I've added the following custom css but it just crosses out the overflow and doesn't change anything:
.slides_container[style] {overflow:visible !important;}
Thanks a lot!
For me overflow:auto!important and overflow:visible!important both working nicely.
See live here: http://jsfiddle.net/mayankcpdixit/h7JmT/
This is because there is a javascript which is adding these styles on document load. And I believe this is some kind of slider where usually the overflow is hidden. If you need a slider where overflow is visible, then select your desired slider and use it. Make sure you remove the present slider before doing so.
putting
overflow: visible !important
will allow you to give preference over styles inheriting from other style sources. But will not stop a javascript changing the styles.
I believe this one below created by roXon will give you some idea of overflow : visible sliders
http://jsfiddle.net/roXon/tMxp5/1/
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite