This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed 4 years ago.
I have css in my html code such as this:
<img src="" style="width:500px;">
I want the image to be large on normal desktop/laptop screens.
But I want the image to be responsive on mobile.
I've got img in my css file set to width:100% at a certain screen resolution but my inline css code above seems to override my css in the styles file.
#media screen and (max-width: 720px) {
.container .row p img {
width:100%;
}
}
Any ideas?
You will need to use !important:
#media screen and (max-width: 720px) {
.container .row p img {
width:100% !important;
}
}
Using the !important tag will let the browser know that one is to be used.
This should work
#media screen and (max-width: 720px) {
.container .row p img {
width:100% !important;
}
}
Related
I have a text (in a div) which shows on desktop and mobile screens.
Expected
I want the text to only show in #media only screen and (max-width: 768px)
How to
hide the div with display:none or
is there any other solution?
Use media query.
Set display:none to div and then apply display:block for mobile using max-width media query.
Stack Snippet
div {
display: none;
}
#media only screen and (max-width: 768px) {
div {
display: block;
}
}
<div>Text</div>
or you can use the min-width media query. Less code here
Stack Snippet
#media only screen and (min-width: 768px) {
div {
display: none;
}
}
<div>Text</div>
I need to add Bootstrap container + 60px.
How I can do it, without changing Bootstrap itself ?
I've tried this media query, but it doesn't work.
#media (min-width: 1200px) {
.container{
max-width: 1260px;
}
}
How can I do that ?
Just change your css code to 1260px, in case you dont wan't to change this in your bootstrap css file, make a new file and set it like so:
#media (min-width: 1200px) {
.container {
width: 1260px;
}
}
Make sure your new file is loaded below the original file of bootstrap css. Dont use max-width in this case. Good luck!
Did you tried to add !important at the end of your CSS definition ?
Try this way:
#media (min-width: 1200px) {
.container {
max-width: 1260px !important;
}
}
This question already has answers here:
CSS media queries: max-width OR max-height
(5 answers)
Closed 7 years ago.
I'm creating a responsive website. I use something like this for hiding some elements for mobile display:
#media (max-width: 599px) {
.hidden-mob{
display: none !important;
}
}
// and then add "hidden-mobile" class for arbitrary elements
Now I need to check some elements from the height aspect. I tried this: #media (max-height: x) but I don't know why it does not work. Also it should be noted that I need to a OR, I want this condition:
If current-height <= x or current-width <= y Then hide element
How can I implement the above condition using CSS ?
Use , to implement the OR condition.
#media (max-width: 599px), (max-height: 700px) {
.hidden-mob {
display: none;
}
}
<div class="hidden-mob">Hidden below 599px width or when height is below 700px</div>
I had a hard time to fix it. Maybe I am just very noob on css.
Basically, I want the icon to visible only in Mobile version of the site.
in above 767px I put this code to make i hidden.
.neighbourhood-img img {display:none;}
My question is, how can I make it visible in below 767px width..
Thanks!
hey check out this css
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
#media screen and (max-width: 767px) {
.neighbourhood-img img {display:block;}
}
What you need is called media queries. Try with:
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
It will be hidden when the width of the screen is at least 768px
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
I think I understand what you're asking.
If you only want it to visible on mobile version then you could do the following:
Make a new CSS rule:
#media only screen and (max-width: 767px) {
.m-show {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
}
Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):
<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>
This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).
i have a question, so I would like to use #media tag, Is it possible to remove IMAGE
<img>
from the div after web resizing?
I mean something like that
#media (max-width: 600px){
#content{
remove Image from this div content
}
}
You're looking for display: none.
You switch the display property. Standard the image display property is inline. To remove it from that particular div you can use:
#media (max-width: 600px){
#content img {
display:none;
}
}