I am trying to hide a piece of div element on a desktop version of a website and display it on a mobile. However using media query does not allow me . Do you know what might cause the problem? Below is my code:
#media all and(min-device-width: 768px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and(min-device-width: 321px) and (max-device-width: 767px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and(max-device-width: 320px){
.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}
And my html:
<!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products">
Desktop test
</div>
<!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products-Mobile">this is mobile test</div>
<!-- This class will be displayed on the mobile and the desktop version of the site -->
<div cass="Benefits">
content
</div>
It's very simple... Just add a space between and and (min...) ;)
Edit your media queries to the following:
#media all and (min-width: 768px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and (min-width: 321px) and (max-width: 767px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and (max-width: 320px){
.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}
Working jsfiddle. Removed -device- from your media queries.
EDIT
To answer questions regarding the use of -device- in media queries - this has been deprecated in Media Queries Level 4. From W3C:
To query for the size of the viewport (or the page box on page media),
the width, height and aspect-ratio media features should be used,
rather than device-width, device-height and device-aspect-ratio, which
refer to the physical size of the the device regardless of how much
space is available for the document being laid out. The device-* media
features are also sometimes used as a proxy to detect mobile devices.
Instead, authors should use media features that better represent the
aspect of the device that they are attempting to style against.
Related
I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
I want to style my HTML differently according to different media queries. For example, I want my HTML to display in a way when it is viewed on a browser with a width of 1024px or less, and in another way if it is viewed on a browser with a landscape orientation (like when a phone is flipped over). Here is what I tried doing;
#media (max-width: 1024px) {
h1{
margin-top: 10px;
}
}
#media (orientation: landscape) {
h1{
margin-top: 20px;
}
}
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
But unfortunately it didn't work. The problem was that when I loaded the site on a landscape device the code did not change.
Note: My problem is not that the media queries are completely not functioning. It is, however that I am being unable to use more than two media queries.
Thank you.
For a beginning, try to use this instead of what you have:
#media screen and (max-width: 1024px) {...
On my wordpress site, I want to insert and image that should be visible only when viewed on on a mobile device and not on a desktop. What CSS/HTML code can I use here?
<div class="mobile-only"> TEXT/IMAGE </div>
Take a look into viewports. Then you could add a viewport for mobile versions.
Something like:
#media only screen and (min-width: 1024px){
.your-image-div{
display:none
}
}
#media only screen and (max-width: 320px){
.your-image-div{
display:block
}
}
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes