Media query not working properly (Media query link after css styling) - html

Hey guys,
I have attached a photo to show and figure out why my media query is not working properly. In this photo I want to show you that I want to make a contact page and I have styled it in HTML and in CSS. After completing styling I want to make it responsive, so I used media query. But as shown in the picture, it is coming after css which is affecting my media query and block it to make it responsive. I just want to know why this is happening. I have also checked linking and asset target but I am unable to figure it out to solve this problem. So guys, please help me to solve this error.
Thank you in advance.

Once you should try in the media query css property
width:100% !important;
sometimes css property clashes with same selector in property
When it comes then you should define in property as important in css

Related

CSS applying from console but not applying when applying from internal stylesheet with the same class

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.

while using my css class in bootstrap not working

I am trying to build a website using bootstrap,so while making navigation menus of home,about,etc and trying to give top margin using my own built css class,but its showing now effect even after using my css class, what's the problem,please help enter image description here
Not sure what you are trying to do but if you need borders then Try using Borders rather than using Margin
Eg: border-bottom:10px
regards
Kiran
If I can see well, your problem is that you have
my name.
a class have to be together, something like:
my-name

Cannot resolve conflicts between hexagon.css and materialize.css

I am using Responsive Hexagon Grid as my base layout. After clicking a hexagon, I want a Modal to show up. For that I'm using Materialize CSS. However, After importing materialize CSS, the hovering effect of hexagon.css is completely messed up!
Is there any way I can solve this and get original hover effect like below? I'm new to this stuff.
https://github.com/web-tiki/responsive-grid-of-hexagons
See the error here:
http://imgur.com/a/IhO5Q
(You may need to Google about Materialize CSS as I'm not allowed to post more than two links here).
I'm answering my own question here:
The conflicting code was for h1 tag. You just have to remove bottom padding from h1 tag to get things work!

how do i add css to a drupal 7 view

I have created a view in the back-end named 'photo gallery'.
I have CSS in style.css where class name is
.gallery{...};
I want my photo gallery to have the .gallery CSS.
In the views block I have tried giving the Css as
settings-> add field html-> add css class-> .gallery
but its not taking the css. is there any other way? what am i doing wrong here?
can anyone help me how to achieve this?
drupal should add wrappers to your view by default, the correct CSS class to use should be:
.view-photo-gallery{}
or when it's in a block:
#block-views-photo-gallery-view-block{}
Also classes for first, last, even and odd rown will be added.
If these don't work, use inspector to determine the correct classes

Ignore CSS on html element

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