I want to change a division width based on screen resolution like bootstrap column col-md-6 col-xs-8.
But I want to give a different percentage for different resolution, for example 20% width for medium size and 90% for small size, that s why I do not use the bootstrap.
I ve searched for an answer, but I didn't find.
You would need to use media queries. For example:
#media screen and (min-width: 480px) {
body {
width: 80%;
}
}
#media screen and (min-width: 1920px) {
body {
width: 70%;
}
}
Here is a solid list of media queries: Comprehensive Media Query
List
Related
So I'm not really good at css since I'm working more on the backend, I have two max-device-width where if the max is equal or less than to the value it will follow what style implemented but, I have this in css:
#media (max-device-width: 700px){
.main-news .mn-img img {
height: 15vh;
}
}
#media (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
my problem is that when the device is already below 700px its still follow the 1024px style not on what i put on the 700px. How can I do this? that when it is now below on the 700px it will follow the 700px style not the 1024px style in css.
For 1024px, you need to do both min and max, so that it falls in a range. For example:
#media (min-device-width: 701px) and (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
Note that you can't have the specified width overlap with one another. If you want to set a small screen with 700px max-width, then the min-width for a medium screen should start at 701px.
You can use media queries to specify a range, eg: #media (min-width: 30em) and (max-width: 80em) {... and you can combine them as you wish. So use min-width and max-with to specify ranges.
Look here for a complete primer on media queries: https://css-tricks.com/a-complete-guide-to-css-media-queries/
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.)
I wanna make my website responsive and all sizes correctly work, but the problem is when the screen is <420px they use the media query 992px information, not the 420px why ?
the problem is all classes work correctly in 420px but in this class, they take the 992px
#media (max-width: 420px) {
div.test {
width: 200px;
}
}
<div class="container test">
<img src="img/img.png">
</div>
It sounds like you're calling a max-width:992px media query after your max-width:420px media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:
#media (max-width:992px) {
...
}
#media (max-width:420px) {
...
}
The best practice is to build the site "mobile first", meaning the default values are for the mobile version, and then you can override width definitions using media queries.
So if you want 200px on 420px width, and 400px on 992px width, you should do something like:
.test {
width: 200px;
}
#media screen and (min-width: 992px) {
.test {
width: 400px;
}
}
Always use min-width and always start with the small resolution and override with bigger resolutions.
The Goal
The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example
Screen Size Boxes Percent Width
1250px 3 33.3
750px 2 50
500px 1 100
Current Progress
I have created the grid system and the media queries
/* Max Width 1250px */
#media screen and (max-width: 1250px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media screen and (max-width: 750px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
The Problem
I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?
JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/
I've had a similar problem before.
You should use both min-width and max-width to set lower and upper bounds respectively.
Also your first two are redundant. Both give the .boxes class a width of 50%. It would be better to combine them into one, that serves both viewpoints
/* Max Width 1250px */
#media only screen and (min-width: 501px) and (max-width: 1250px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Using the above syntax is a great way to prevent confusion.
Edit: Media queries only work on ie9 and above. If you are using an older browser, the above will NOT work.
Second Edit: It looks like in media queries you need to add only before the type. For example
#media only screen instead of #media screen
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.