All,
I am trying to develop a responsive site, but for some reason the media query I use for the ipad/tablet is also effecting the iphone/mobile. Are my dimensions wrong?
What is the best way to target all three device types?
Thanks
/desktop/
#media (min-width:1100px)
/ipad/
#media screen and (max-width: 1115px)
/iphone/
#media screen and (max-width: 767px)
This is a common problem in responsive design and there are many approaches that try to solve it. I myself find a 4-breakpoint layout to be the most fitting for most of the situations.
Phone: default
Phone-Landscape: min-width 480px;
Tablet: min-width 768px
Tablet-Landscape: min-width 1024px
Desktop: min-width 1260px
Think of min-width as meaning greater than or equal to and think of max-width as meaning less than or equal to.
By that logic your iPad rules (less than or equal than 1115px) are also going to affect the iPhone since it's screen is less than 1115px.
It sounds like you want to use an AND on your ipad rule to make it only affect rules that are bigger than your iphone rule set. Something like:
#media screen and (max-width: 1115px) and (min-width: 768px)
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more information
Related
What is pixel perfect design? is it not responsive? i saw many tutorials on youtube ( figma to html css) and all of them are using the same css which is defined in figma for each components. like 283px and 90px width for a box. My question is how can i make this responsive if it is fixed in pixels? if i make 3 layouts of design ( mobile ,tab, desktop) then it works properly on these specific resolutions but don't work properly between those 3 (mobile,tab,desktop) resolution. If i use rem, it doesn't work responsive. I want to learn how to code Figma/xd/psd to HTML CSS.
Responsive Design is a topic in of itself and you seem to have little prior knowledge about it. There are many web frameworks and practices that help you create responsive designs. Without an example of what exactly you are trying to achieve it is hard to help you. Let me try anyway:
You are correct about absolute units not changing upon device-size. The best ways to have responsive code straight out of Figma is to make a lot of use of its constraints. You can set sizes to scale with the parent, keep left and right margins, use auto layouts (translates to flexbox css) and so on...
In general css provides you some relative units like %, em, rem, vw and vh: https://fullscale.io/blog/best-css-unit-for-responsive-web-design/
rem is relative to the root- element's font-size.
em is relative to the parent element's font-size.
% is simply the percentage of the parent element's width.
vw and vh are the percentage of the viewport's width and height.
I'd also suggest you look up #media breakpoints which are a way to apply css styles to different device sizes: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
I am wondering if it is possible with that following scenario:
I have Media Query css for min-width of 700px and max-width 1000px (normally used for mobile device rendering on browsers)
but, when the older mobile devices with less than 1000px or around 300px, force the site to apply media query for min-width of 700px and max-width of 1000px?
I appreciate response and input.
#media only screen and (max-width: 1000px) and (min-width: 700px) , screen and (max-device-width:300px)
{...}
Try max-device-width:300px
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this CSS:
#media (max-width: 1100px) and (max-device-width: 1100px) {
.wrapper {
width: 200px;
}
.page {
width: 100%;
}
I have also tried the following css rules:
#media (max-width: 1100px) and (max-device-width: 1100px) {
and
#media only screen and (max-width : 767px) { .wrapper { width: 100%; } }
and
#media only screen and (min-width: 1024px) and (max-width: 1280px)
and
#media only screen and (min-width: 993px) and (max-width: 1024px)
None of these CSS rules work.
Its all being totally ignored on an iPhone.
But it works fine in a browser resized to iphone size.
Have a look for yourselves:
http://www.moonshineandfuggles.com/
Ive extended the max-width to ridiculous values to try and include iPhones.
I dont want the .wrapper to be 200px, I want it to be 100% and for it to take into account the width of the device.
It seems like the iPhone thinks it should make this page about 700ish pixels wide.
How can I make the iPhone realize I have made this site responsive so it adjusts to the correct size?
The following has some information you might find useful of media queries -
What is the difference between "screen" and "only screen" in media queries?
My first recommendation is that you design the flow of your CSS to work from your smallest supported resolution outwards, such as designing your CSS file to support mobile devices and then using media queries to deal with changing the properties in your CSS file to support larger resolution windows / devices.
The following link explains the benefits of this more clearly than I am ever likely to - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.
Using this design approach makes it easier to deal with questions of specificity, which can occur when you try to use a media query to override an already defined property. One handy way of avoiding such conflicts I obtained from Media Query Styles Not Overriding Original Styles - note Adrift's usage of body.
You do not need to use media queries to override a property if you are not going to actually change it - e.g. you do not need to specify the width of wrapper in your media queries since it has already been defined in the main body of your CSS file.
As for your problems regarding width, try setting the width of body (or, failing that, wrapper) to 100vw if you are having trouble with 100%.
I hope that the above is not too confusing.
If you have any questions, then please feel free to reply.
I am attempting to change to top margin on a div according to the browser width.. using one query along with the main css worked but when I added another set of screen widths/correlating styles they did not respond. What is the best way to have multiple device widths say if I wanted to have 4 or 5 different margin tops as the screen adjusts.
the code below is an example of what I tried and I am not too sure what I am doing wrong... All help is greatly appreciated.
#media screen and (min-width: 1px) and (max-width: 410px){
.inner-cont{margin-top:130px;}}
#media screen and (min-width:411px) and(max-width: 1000px){
.inner-cont{margin-top:50px;}}
I am new to this but am learning alot and am very appreciative to all on this site for all the help. Thanks alot guys!
You don't have a space here, and thus your media query fails
and(max-width: 1000px)
--^--
Demo (Resize the fiddle window to see the effect)
Also, am not having the markup, so if you are trying to apply margin-top:130px; on an inline element, it will simply fail, also, inheritance matters, order of the media query matters too, but as far as the question goes with the provided code, only issue I can see was the missing space..
you are missing only keyword but
your media-query works, see here
for eg
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
see examples here
see demo here (change browser width to understand)