I have an css issue about one plugin on responsive view and I want to hide on mobile. I want to use another plugin only for mobile view. How can I do that?
You can use media query for hiding element on desktop and mobile
#media only screen and (max-width: 767px) and (min-width: 200px) {
.container_mobikle{
display:block !important;
}
}
I am using the wordpress twenty twelve theme
I am unable to turn off the menu at 800 px, using media queries.
my site
Try setting in your style.css
#media screen and (max-width: 800px) {
.menu-main-menu-container{
display:none;
}
}
This will make the main menu 'disappear' under 800px window width.
I have used Bootstrap extensively and regularly used the css classes to hide various elements from mobile view. Does Skeleton CSS have a similar thing for hiding content on a mobile?
Used a media query example below:
#media only screen and (max-width: 500px) {
.someStyle {
background-color: display: none;
}
}
Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input #media screen and (max-width) similar to here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
When I press enter it simply disappears. What can I do to dynamically add and remove media queries?
When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in #media rules which appear only in a proper stylesheet.
On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.
Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.
Then just write your CSS:
#media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}
You can use New Style Rule.
Click on Plus symbol (+) besides .cls.
and then, you'll see it generates new class. Now click on inspector-stylesheet.
You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.
You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,
<style>
#media screen and (min-width: 0px) and (max-width: 400px) {
body {
background-color: red;
}
}
#media screen and (min-width: 401px) and (max-width: 599px) {
body {
background-color: green;
}
}
#media screen and (min-width: 600px) {
body {
background-color: blue;
}
}
</style>
I had the same problem and finally figured out that when I was entering for example:
#media (max-width: 767px)
.col-sm-3 {
width: 75%;
}
my screen size was actually more than 767px. So when I pressed enter, it disappeared and seemed to not work. But what I realized is when I adjusted the screen size of my browser to below 768px, I saw the media query in the styles.
I want to have 2 sidebars on my site. I have a responsive CSS using viewport. But I don't want to show sidebars when the site is opened in mobile browsers. Tab would do fine. Is there some way I can do so?
For example: Stack Overflow. When you open it in mobile, you don't see the sidebars. I want something similar like this.
You can use media query for this mobile only define :
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Read this for more http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can use media-queries and selectively show/hide the sidebar (change the sidebar class as applicable in the below code) like:
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
}
Stack Overflow has a custom HTML for mobile pages.
But you could try Bootstrap