Guys how to make this kind of things in creating a website
This is the full picture:
When I scale down the browser it will turn out like this
What you're looking for are #media rules. With #media rules you can not only apply different designs for different output devices (screen, printer, braille, ...), you can also specify different designs for different screen sizes.
Example:
p {
font-size: 120%;
}
#media (max-width: 1000px) {
p {
font-size: 110%;
}
}
#media (max-width: 600px) {
p {
font-size: 100%;
}
}
Other possible properties are max-height, min-width and min-height.
The rules can be combined:
#media screen and (max-width: 600px) and (min-height: 800px) {}
Media Queries - MDN
Related
I am using media queries, in the below order:
#media screen and (max-width: 1600px) and (max-height: 1024px) {
.img {
width: 150px;
}
}
#media screen and (max-width: 1600px) and (max-height: 900px) {
.img {
width: 100px;
}
}
When my screen resolution is 1600x1024, the 1600x900 rule kicks in. When my screen resolution is 1600x1024, the 1600x900 rule also kicks in. This is according to the Developer Tools -> Elements -> Styles tab in chrome. The other rule is always crossed out for some reason. If I switch the order of the rules, then the 1600x1024 rule always kicks in. Am I misunderstanding something?
The problem is that you are applying both rules at the same time eg. your max-width is identical in both rules. Also remember that max-width targets the specified number and below and that min-width targets the specified number and above.
Can you try the following example?
#media screen and (max-width: 1600px) and (max-height: 1024px) {
.img {
width: 150px;
}
#media screen and (max-height: 900px) {
.img {
width: 100px;
}
}
In this case we don't have the same pixels specified as max-width.
More to be found about Media Queries here: https://www.w3schools.com/CSS/css3_mediaqueries_ex.asp
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 need help to change % width on my category images within my site whenever my screen gets smaller. Or the images will get super small on smaller resolution.
What I want to achieve is something like this: http://www.twitch.tv/directory
I've tried to do this by using this code. (but it isnt working)
.category-list-item {
float: left;
#media screen and (max-width: 769px) {width: 20%;};
#media screen and (min-width: 480px) {width: 25%;};
#media screen and (max-width: 480px) {width: 33.33%;};
padding: 1em;
Would be super greatful for any help!
/ Martin
As rekire says, you messed the syntax, and you need to set full rules.
Also, there shouldn't be semicolons after the rules.
And lastly, your 2 final rules cover all the posibilities, width being greater or smaller than 480px, so the first rule will never apply.
I have changed it so that you have an style for lower res, another for higher res, and the default applied in between
.category-list-item {
background-color:red;
}
#media screen and (min-width: 769px) {
.category-list-item { background-color: green; }
}
#media screen and (max-width: 480px) {
.category-list-item { background-color: blue; }
}
<div class="category-list-item">Test</div>
I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.
I am creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...