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>
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
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
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 have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.
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...