I have a website that uses "card" views. When viewed on a desktop I set the CSS for the card as such:
width: 75%
margin: auto
I did this so the "card" would not take up the entire width which looks nicer on the desktop:
But what I am trying to figure out is how to take the width and margins auto off when the screen sizes changes to a mobile smaller screen. I want the card to be width 100% when in mobile view for obvious reasons. How can I change the CSS based on width of the window?
Here's a standard bootstrap mediaqueries.make sure you put this meta tag on head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Related
This is my first attempt at using html and css. I know there’s many mistakes in the code, but if someone could point me in a direction to get it viewable in mobile, I’d be very appreciative.
Use this code. Change styles based on the device you are using
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
#media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
I have a 640*225 image I want it to fit on various device screens,
When I put width="100%" it fits perfectly on small device but on a PC it extends till it fits the entire browser width responsively.
Is there a way to set the actual image size on large screen and responsive when it hits the width size image?
try width:100%; max-width:80%;
You can use media queries to specify custom styles for every screen resolution. The most popular of them I put in the snippet below:
/*========== Desktop First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
For more info about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am working with a responsive website.
I want to design for all large desktop.
But I don't know the exact media query for large desktop.
Try the following, they are the default bootstrap breakpoints.
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
my media query works as per expected on my desktop however not in the mobile phone or the tablet.Please check out the live code here http://jsfiddle.net/E8cgT/
if the screen is bigger than 1024px it should be green my tablet screen is but the background stays yellow.
This also happens on my cell phone no matter what is stays yellow.
or read below
my html:
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
</head>
<body>
<div id="master">
<header>
</header>
<nav>
Welcome to the home page from the sites directory
<ul>
<li>Meet Your Sensei</li>
<li>Tour Our Dojo</li>
<li>Our Martial Art Program</li>
<li>Our Training Schedule</li>
<li>Current Events</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div><!-- end of the master div tag -->
</body>
</html>
my css:
/* this will not work as we have below media to over ride */
body{ background-color: red;}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media only screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (min-width:481px)
{body{background-color: yellow;}}
[SOLUTION]
1) The view port was something which I did not know about.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I changed the priority of the screen after all is casing style sheets.
body {
background-color: red;
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
Thank you all.
See if this helps you:
Live view
Edit view
I've made a few changes to your code;
Firstly you want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the head of your page. This will stop smartphones and other devices from scaling the page.
In your media queries you use #media screen only and .... There's nothing wrong with using only in the selector, though it does have a specific use, to hide the style from older browsers. If this isn't intentional then you can omit it.
( The keyword ‘only’ can also be used to hide style sheets from older user agents.: source
I think you'll have an easier time targeting different size viewports if you use
#media screen and (min-width:Xpx) and (max-width:Ypx){
....
}
as #Tdelang correctly pointed out.
Good luck!
Because of the cascade. You must set an upper limit for the middle breakpoint:
media only screen and (min-width:481px && max-width:1023px)
{
...
Have you tried using
#media all
or
#media handheld, screen and (max-width:480px) { /* your css */ }
try this
http://jsfiddle.net/E8cgT/3/
CSS
/* this will not work as we have below media to over ride */
body {
background-color: red;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body
{
background-color: blue;
}
}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px) {
body {
background-color: blue;
}
}
/* High resolution for screen between 1024 and above
*/
#media only screen and (max-width:1024px) {
body {
background-color: green;
}
}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (max-width:481px) {
body {
background-color: yellow;
}
}
OR PLEASE USED THIS CSS FOR RESPONSIVE MOBILE,TABLET,DESKTOP
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
use it this will work for me in mobile, ipad and also on window screen.