I'm having problems making my custom <h2> class used on text responsive for mobiles
I want to make the this h2 class resize to a text size of 49px when viewed on a mobile device.
This is what I've tried so far:
#media screen and (min-width: 320px) {
h2.josh {
text-size:49px;}
h2.josh {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
font-size: 79px;
color:white;
font-family: 'Oswald', sans-serif;
opacity: 0.9;
display:inline-block;
display:inline-block}
.dark-text{color: #1e1e1e}
body { padding-top: 0px !important; }
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { h2.josh { font-size:49px !important; } }
You're missing a bracket at the end. And try using !imporant with the style rule because maybe you have style rules applied within the element itself!
You're missing a closing curly bracket after the media query
#media screen and (min-width: 320px) {
h2.josh {
text-size:49px;
}
}
First off, do not use !important. Its not a good practice. And once you close the media query it should work. Also, keep using min-width rather than max-width. Modern development should be mobile-first and min-width is a best practice.
What is
text-size:49px; /*should be **font**-size*/
Also call this #media query after the other css not before or you will have to search whole document for the over ride. Always load these in last and you have put min-width?
In this case you should be using max-width and use say 640px or 720 for the mobile devices etc. So everything less than eill take this style and as its being loaded last will take.
Related
Hello so i have tested my new site and it seems like that site with other resolution does not work so good.
Here is first picture (1920x1080)
And second screen (1360x768x)
I have also added some Media Queries, but still wont work.
#media only screen and (max-width: 1200px) { }
#media only screen and (max-width: 959px) { }
#media only screen and (min-width: 768px) and (max-width: 959px) { }
#media only screen and (max-width: 767px) { }
#media only screen and (min-width: 480px) and (max-width: 767px) {
.checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
#media only screen and (max-width: 479px) {
.checkbacksoon p span { font-size: 150px; line-height: 160px; }.error {font-size: 14px;}.search {width: 220px;}
I am guessing that your object that those numbers are on is absolutely positioned...
Try making that big box container
position:relative
That should at least keep it inside of that.
My advice would be look into something called "Bootstrap CSS" in order to make your website compatible on all screen resolutions and screen sizes.
http://getbootstrap.com/css/
Apologies for my answer being extremely vague, just trying to help :)
Hope this helps,
Sohail.
I'm trying to specify different colors for selected range of screen sizes, however I just can't seem to figure out the iPad Mini 2 with Retina Display. It does simply not follow the rules of it's pixel resolution and I wonder why.
Here is my code:
/** Retina iPad **/
#media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5){
body {
background-color: #486ffd;
}
}
/** 1600px non-retina screen **/
#media screen and (max-width: 1600px){
body {
background-color: #770029;
}
}
/** 1000px non-retina screen **/
#media screen and (max-width: 1000px){
body {
background-color: #117700;
}
}
/** 500px non-retina screen **/
#media screen and (max-width: 500px){
body {
background-color: #ffce00;
}
}
/** 300px non-retina screen **/
#media screen and (max-width: 300px){
body {
background-color: #770200;
}
}
Now when my iPad Mini 2 is in portrait mode it shows the background color #117700, and when I have it in landscape it shows the color #770029. How come it does not follow the rules of its resolution on: 2048x1536?
I also have this in my HTML:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=3;" />
I've tried using both a pixel ratio on 1.5 and 2 which has been suggested by others in previous questions. Any help?
The website I am using is here if you wish to see for yourself.
The problem was solved by putting the CSS specification in the correct order.
When selectors have an equal specificity value, the latest rule is the
one that counts.
I also added:
only screen and (min-resolution: 192dpi)
only screen and (min-resolution: 2dppx)
In order for it to be even more fit and specified.
/** 1600px non-retina screen **/
#media screen and (max-width: 1600px){
body {
background-color: #770029;
}
}
/** Retina iPad **/
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
body {
background-color: #486ffd;
}
}
So correct order is: LAST overrules FIRST, which means device-width needs to be overruled by the retina specifics. More about this can be read here CSS Specificity
I am using two media screen resolutions, and the problem is that, at 320px it takes margin-left: 16% which is intended for 480px screens. How can I separate these styles, so at 320px it takes what`s inside it and so on.
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
#media screen and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
Add min-width:
#media screen and (min-width: 321px) and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
If you are specifying only max-width then:
Place the default rules at the top
Place the rules that use max-width media queries afterwards, sorted by max-width descending:
/* rules for > 800px */
#media screen and (max-width: 800px) {
/* rules for 800px and less */
}
#media screen and (max-width: 480px) {
/* rules for 480px and less */
}
#media screen and (max-width: 320px) {
/* rules for 320px and less */
}
The sorting order is important. In the above example, if the screen is 320px wide then it satisfies all three conditions (max-width: 320px, max-width: 480px, max-width: 800px). In this case the rules declared last win; hence the rules are sorted that way.
Both styles apply. After all, the screen width of 100px is still less than 320px and also less than 480px. Both declarations have the same 'weight' and the second one therefor overrules the first, purely based on the order in which they are specified.
To overcome this, specify a min-width as well:
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
or change the order:
#media screen and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
Both should work and both have advantages and disadvantages. When adding a min-width, the declaration is more clear and less confusion can be made. The rule makes it very clear that it is only for 320+ and 480- resolutions.
The advantage of the other one is that it is less CSS, also you can set properties that apply to small screens (480-) in general, and only define extra overrules in the 320 version. This keeps the CSS smaller, but in my opinion also less clear.
I am using this media query for target viewport max-width of 800px devices mininmum with of 400px
#media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}
And i need to change the color in the landscape orientation for this i use this code
#media screen and (orientation:landscape)
{
body {background:red;}
}
its working good in the device but the background red applies for pc browsers also how to apply background red in devices landscape orientation only?
Thank you.
You aren't choosing an element to apply the background to
#media screen and (orientation:landscape)
{background:red;}
Should be something like:
#media screen and (max-device-width: 1000px)
and (orientation:landscape){
body {
background: red;
}
}
The max-device-width should make it ignore desktops, if you don't put device in there, it will still affect desktops that have made their browser smaller.
try in this way
#media screen and (max-width: 800px)
and (min-width: 400px) {
body {
background: white;
}
}
#media screen and (max-width: 800px)
and (min-width: 400px)
and (orientation:landscape) {
body {
background: red;
}
}
or try to detect handheld-only devices looking at the min-resolution value as in http://jsbin.com/irozuf/1/edit - e.g.
#media screen and (max-width: 800px)
and (min-width: 400px)
and (min-resolution: 97dpi) /* a typical screen has 96dpi */
and (orientation:landscape) {
body {
background: red;
}
}
Looking at this list of displays by pixel density it seems that it could work fine on modern mobile devices
if you add these meta tags to head of page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so the key: "width" means same "device-width".so,
#media screen and (max-device-width: 1000px){}
is equal to
#media screen and (max-width: 1000px){}
use each one you like:
[meta tags with key "width"]
OR
[no meta tags but "device-width"]
For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.
Have I missed anything?
#media only screen and (min-width: 1024px) {
/*styling here*/
}
#media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}
#media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}
Check Out this,
and let me know whether it is working or not
You need to specify device width.
I think you may need to specify it as 'min-device-width'.
#media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
/*Mobile styling here*/
}