<style>
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content{ display: none; } /* show it on large screen */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content{ display: block; } /* hide it small screens */
}
<style>
<div id="my-content">
This code works but I want to add a button for show/hide this "my-content" on small device. I don't want to show this button in large display. This button only show on small screen. I want to use this code with a bootstrap site.
You just did the opposite of what you wanted to. Here is a quick fix:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content{ display: block; } /* show it on smaller screen */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content{ display: none; } /* hide it on larger screens */
}
<div id="my-content">
Shows only on screens having max width of 400px.
Resize your browser's width to see changes
</div>
Bootstrap already has classes to hide things/make them visible. Check to see if these are in your style sheet. http://getbootstrap.com/css/
.visible-xs-, .visible-sm-, .visible-md-, .visible-lg-
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg
Related
I tried searching on the internet for an answer and I couldn't find one that worked. I want to make my site responsive to mobile where the li elements become smaller on the screen when vertical. This is my code, I did put in a link to the style sheet where it is and did put the meta viewport part in the heading section.
#media only screen and (max-width: 400px) {
.list {
width: 30px; height: 20px;
}
}
Here are some common standard points:
#media (min-width: 320px) { /* for iPhones and smartphones */ }
#media (min-width: 481px) { /* for larger phones and small tablets */ }
#media (min-width: 600px) { /* for tablets */ }
To be honest, it would be really helpful if there was such thing as #media (min-size: iPhone) or #media (min-size: windows_tablet); it would make it a whole lot easier.
I want to hide the facebook like box with CSS.
I used this:
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
but this works but only for big displays and it's still showing on mobile.
When I resize the webpage on desktop and make it smaller in width, there is a tipping point where the responsive changes and the fb-like-iframe is displayed.
I tried using this to hide it on mobile as well but no success do far:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
Instead of min-device-width and max-device-width you can use min-width and max-width.
Or better result you can use only max-width..
/* Smartphones (portrait and landscape) ----------- */
#media only screen (max-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
currently you are using this:
#media screen and (min-width: 768px)
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
just change (min-width: 768px) to (max-width: 768px)
let me know if this is what you need
There was conflict of style.css with a minified version that was causing it not to work only on mobile.
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
I've fixed it and now the original code (above) works on both desktop and mobile. Thanks
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
Currently I have several divs with the CSS
.bodyText {
margin:auto;
padding: 1% 20%;
}
But when the screen gets reduced to the size of, say, an iPhone screen I want to reduce the left & right padding to 1%.
Thanks!
What you're looking for is known as a media query. These are denoted by the # symbol in CSS, and can not only target screen widths, but also specific orienations:
/* Any iPhone */
#media screen and (max-device-width: 480px) {
.bodyText {
padding: 1%;
}
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
.bodyText {
padding: 1%;
}
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
.bodyText {
padding: 1%;
}
}
You can do it with #media queries. There are rules for set specific size of screen, or more.
Example:
#media (max-size: 800px) {
// here is your code
}
I have this problem...I am running page http://exploreprague.cz. In the right upper corner I have ribbon. But when I am looking on it on my tablet, its's overlapping my menu. So I figured that if there is way to show different picture(different kind of ribbon, not just differently styled) it could work. But I don't know if there is some kind of HTML/CSS/JS trick which can do it. Thanks
One of the better ways to achieve what you want would be to use CSS3 Media queries.
In the CSS file targeted at tablet-sized resolutions, you could set display:none on that particular image, and replace it with a new image that fits in with your smaller resolution better if you prefer.
For example (iPad portrait/landscape resolution):
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#oldImg { display:none; }
#newImg { display:block; }
}
Here is an example of how to use a responsive css:
Large desktop
#media (min-width: 1200px) {
#largeImage{
display: inline;
}
#smallImage{
display: none;
}
}
Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) {
#largeImage{
display: none;
}
#smallImage{
display: inline;
}
}
Landscape phone to portrait tablet
#media (max-width: 767px) {
/* do the same as tablets or include this width range in the tablet style*/
}
Landscape phones and down
#media (max-width: 480px) {
/* do the same as tablets or include this width range in the tablet style*/}
Just set the image display property according to the width of the screen.
use 2 images one with
display: none;
and the other with:
display: inline;
and switch between them on a narrower screen