I have a VERY simply html form (an image with some text & select fields) which I would like to change to be available also for mobile devices.
What's the SIMPLEST solution for accomplishing this task ?
I found many explanations on the web, but they are all much too complex for my needs... Basically I just want to have the width of the form adjustable according to device, nothing more :)
Any reference to a SIMPLE tutorial that explains how to do the most basic adjustments for mobile ?
You could use CSS3 Media Queries to build a Responsive Layout.
For instance:
#media (max-width: 767px) {
.yourFormClass {
/* Some rules */
}
}
#media (min-width: 768px) and (max-width: 979px) {
.yourFormClass {
/* Some rules */
}
}
/* other resolutions... */
I suggest you to read these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your
Website;
CSS media queries by Mozilla Dev.
Related
With respect to the following link:
What is the difference between "screen" and "only screen" in media queries?
"only" is used in media-query so that old browsers, which do not support media query should read only (and as hyphenated or alphabets are not present, but a space - they will stop further reading) and the rest of the code will not be applied (as 'only' is not a device type).
In conclusion, we should always write "only" as good practice and our code will be like this:
#media only screen and (min-width: 300px) and (max-width: 800px) { ... }
But, with that logic and applying only to prevent old browsers from messing up code whhile they don't support media query and otherwise screen keyword after being read - the following CSS will be applied globally (see the link above).
Now, what if I want to write certain media query for all platforms, viz. https://www.w3.org/TR/CSS2/media.html
What should my correct code be now:
#media only all and (min-width: 300px) and (max-width: 500px) { ... }
OR
#media all and (min-width: 300px) and (max-width: 500px) { ... }
Remember, all is a device-type keyword, so with the same logic, older-browsers will (if only keyword is not used), whatever CSS code is present will be applied globally.
On the other hand I have never seen a code such as only all so what I expect is to be syntactically-wrong and CSS will not run.
Now, can someone provide me solution with reason, which of the 2 options is correct?
Since all browsers right now support media query you can just use #media and it will work without any problem. Also bootstrap uses #meida which is something that works on all browsers right now.
#media (min-width: 300px) and (max-width: 500px) { ... }
Therefore you just need to use #media and you will get the same result as if you used
#media only screen and (min-width: 300px) and (max-width: 500px) { ... }
Please refer to this link am sure it will be helpful MDN #media
Also, this link is extremely useful MDN media query
I'm using scss and I just want to disable hover features on mobile for a very specific section of code. It's a nested div using the & prefix. So, basically:
.superclass{
.subclass{
#media not all and (pointer: coarse) {
&hover{
hover style
}
}
}}
Would this work? Right now I'm dealing with build issues keeping me from deploying my application locally and verifying that way.
Why don't you use a traditional size approach for mobile?
#media only screen and (max-width : 320px) {
/* Styles */
}
I know how to use #media to target specific devices based on max-width, like so
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
But is there a quick way to do it based on device, like so
#media screen and (min-width: small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: medium) {
body {
background-color: black;
}
}
Yes there is, using a CSS preprocessor, such as Sass, you can do:
$small: 480px;
$medium: 720px;
#media screen and (min-width: $small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: $medium) {
body {
background-color: black;
}
}
I saw your question about media queries and I used to think of the same question. However, in my opinion, both fubar and Raptor are correct in their answers.
That said, I would like to point out one method of using media queries that I personally feel may be one of the more versatile methods.
I personally believe that using Google Chrome's developer tools and slowly shrinking the screen size to see when certain aspects of your website either looks awkward, or just plain breaks, taking note of those screen sizes and then writing media queries at those breakpoints may be the best way to have your site look good on the widest variety of screen sizes.
From my own personal experience, once I start concentrating too much on specific device sizes, particularly when it comes to dealing with the different screen sizes of Android vs Apple products, I inevitably had to go down entire product lines to nail the different classes of screen sizes. That makes for code that can become convoluted in a hurry!
I know this answer doesn't have specific code and can be considered more of an opinion than Dev Bible fact, but I strongly feel that the method I described is the one that (especially if you are not too experienced and are not aware of the various classes of mobile device screen sizes/resolutions out there) will yield the most versatile results.
I hope that helps puk. And if you or anybody feels differently or would like to provide a contrary opinion, please feel free to present it. I do not claim to know everything and am always eager to learn new things, methods and points of view!
I am working on a legacy site for someone where a media query does not seem to be having an effect on 1 out of 3 classes. The classes affected are .free-ship, .wholesale, .chronicles
The css for these on standard screen sizes is:
/* Shipping section - Home page */
.free-ship, .wholesale, .chronicles {
text-align:center;
height:180px;
width:30%;
}
.chronicles {
margin-right:10px;
}
.chronicles a, .wholesale a {
color:#fff;
}
Now I have in place the following css as media queries:
/* Media Queries */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
width:100%!important;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
height:230px;
}
}
The problem is, the media query does not seem to apply to the .wholesale class and I can't figure out why? Again, this is not my site, I am just trying to help out. The site is here (removed for privacy). The code refers to the black/grey boxes near the middle of the page.
Any suggestions would be most welcome. I've checked the custom.css file with css lint and this hasn't shown any errors so i'm looking for where I should look next?
Thank you in advance.
D
On the live site, it looks like the query isn't targeting ".wholesale," but instead it's targeting an older class called ".world-ship".
You may have changed the class name and it didn't get changed in the media query, or else it hasn't been pushed to live.
Media Query with ".world-ship" class
Ok...The issue was a complete oversight on my part, I forgot the site was cached through a CDN, so even though i've updated the css file and cleared the site cache many times, the changes were not taking affect. I've purged the cache on the CDN and its updated.
Clearly a wood for the tree's problem. Thanks for the answers and comments.
is there a special html/javascript code that I can use? So I basically have a non mobile optimised website. I want to show a simple one line message to users browsing my website using mobile devices. The message should only show to mobile users.
Your help is greatly appreciated! :)
Thanks
You should look into media queries for CSS. Basically, you can specify a max/min width, then make a class that is only visible on those widths.
For example:
.mobileView {
display: none;
}
#media (max-width: 767px) {
.mobileView {
/* CSS here */
}
}
Please note that you can adjust the width as needed. Here is a quick source to get you started.