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.
Related
I am coding an email, and have created a class for something to be seen on mobile, but not on desktop.
For some reason, Gmail on the desktop is stripping the class.
Does anyone know where I am going wrong? It works on other desktop email platforms.
<style type="text/css">
/* Smartphone Portrait and Landscape */
#media screen and (max-width: 600px) {
.mobileSpacer {
display: block;
}
}
.mobileSpacer {
display: none;
}
</style>
It should work, as Gmail desktop supports <style> blocks. There are certain forms of Gmail that do not support <style> blocks, and these are: Gmail when viewed from a browser on mobile (Gmail webmail on mobile) - as opposed to the Gmail app; Gmail IMAP/POP (e.g. business users using their own domain); Gmail after you've clicked 'view full email' on a long email.
Gmail will also strip a <style> block(s) if you have something in it that it doesn't like: [attribute] and other fancy selectors, spelling/formatting mistakes. Use it's own style block (you can have multiple) to ensure it doesn't remove this one.
Due to this, I would use a mobile-first solution. That is, inline, use what you want for the mobile view. (I can't suggest what you want inline because you don't have the code for that.) The desktops can cope with <style> blocks.
Then use a min-width #media query:
#media screen and (min-width: 600px) {
.mobileSpacer {
display: none;
}
}
Desktops will apply this (except for a rare few very old desktop/webmail platforms - and that's why we cater for the much more popular Gmail).
Outlook for Windows won't apply it, but it has its own special code. You just add mso-hide:all inline:
<td style="mso-hide:all">
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
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'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.
Is there any way to target the tablet to turn the filter off without touching the media queries?
Thanks in advance
The website in question is www.garethjweaver.com
Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.
http://blog.mobileesp.com/
The method most pertaining to what you want to achieve is:
MobileEsp.DetectTierTablet();
It also allows you to pick specific groups of tablets by OS:
MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();
A possible usage scenario:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
$(function() {
if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true
$("html").addClass("isTablet"); // this will add the isTablet class to the HTML element
}
});
<script>
The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:
<style>
body {
max-width: 1200px;
}
.isTablet body {
max-width: 100%;
}
</style>
It also has other versions for ASP.NET and PHP so you can do the detection server side.
Here's a fiddle illustrating the functionality outlined above:
Fiddle
I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by
#media (orientation: landscape) { ... }
You want to determine if it's a landscape view..right?
about other usages of media query MDN:media query
if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.
Hope my answer helps..:)
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.