Want to know correct (the best) way how to write (code) css for different window widths.
Here is live example https://jsfiddle.net/q0ony7Lb/16/
For example, have left, right sidebars and main content (#middle).
<div id="left">Content in left div<br/></div>
<div id="middle">Content in middle div<br/></div>
<div id="right">Content in right div<br/></div>
If widow width is less or equal to 400px, then want to show only #middle.
If width more than 400px and less than or equals to 700px, then display #middle and #left.
If width more than 700px, then display all.
At the moment doing in such way:
1) write default css (as understand "default" css applies if no other rules inside corresponding #media screen). Default css like
#left {background-color:#fff; background-repeat:repeat; background-position:left top; width:180px; height:25px; font-size:16px; font-family:Verdana; color:black; border-style:solid; border-width:1px; border-color:#000; text-align:left; padding:0px 0px 0px 0px; }
2) For certain window width write special css rules. Like
#media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }
}
#media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}
As result, for example, if window width is less or equals to 400px then hide both sidebars and #middle resizes.
As i see applies css values from "default" and if inside #media screen and (max-width: 400px) { exists different values from "default", then applies different values (different values change "default" values).
Seems all works. But may be some better way how to do all?
Another way may be to write (repeat) whole rules for each width of window. And do not write "default" values. But in such case code would be longer....
One suggestion in the above code.
Since #right { display:none} applies for all widths less than 700, you can add it in #media (max-width:700px).
Use max-width media queries in descending order and keep changing the styles for the lower width screens.
https://jsfiddle.net/afelixj/q0ony7Lb/17/
Related
The step says that, create a media query for screens smaller than 800px in width. In that media query, create a #gallery img rule and set the width property to 50%. This will convert your gallery to a two-column layout. Based on the instruction I wrote the code as shown below but the error shows "You should add a new #media query". So how can I fix this problem?
#media (max-width: 800px){
#gallery img{
width: 50%;
}
}
I am not clear about what you want. But the width (and height) media features can be used as ranges, prefixed with min- or max- to indicate that the given value is a minimum or a maximum. For example:
#media screen and (max-width: 800px){
#gallery img{
width: 50%;
}
}
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
I have a possibly trivial question regarding responsive design.
The fluid grid for columns is amazing. However, is there any grid system for rows? For example, if I want to have a box that has margin-top in large screen but none in small screen, how would I do it?
you can use media-query, for example that you want is here:
jsFiddle
CSS:
div{
width:100%;
height:50px;
background:#ddd;
margin-top:0px;
}
#media (min-width: 500px) {
div{
margin-top:100px;
}
}
with some transition it will look better. (DEMO)
You are looking for something called a media-query. It lets you specify CSS but only if the browser viewport is less than (or greater than) a specified size. According to the src the small screen is triggered at less than 768px. So a rule like the one you are asking for might look like this:
<style>
#media (max-width: 768px) {
.row {
margin-top:0
}
}
</style>
since the hype is Responsive Web Design, and I already know how to write it, I am just here to clarify a few questions of my own before I keep doing something wrong if I am.
If we set a divs style like so:
div {
width:200px;
height:200px;
background: #000;
margin: 10px 5px;
}
Now to be responsive the way we want would we do-
div {
background:#000
}
#media screen and(max-width:1200px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//Question is here
}
}
#media screen and(max-width:720px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//question is here
}
}
#media screen and(max-width:360px) {
div {
width:200px;
height:200px;
margin: 10px 5px;
}
}
The question is in face if we set the margin or any style that is going to be the same for an for greater width or minimum width do we keep assigning it do can we leave it at that? So if we set the margin at 20px 5px will that stay with it until 1200px? And the same goes for reverse will it stay the same until it gets to 360px and then change?
It's just a question that has been bothering me.
The max-width:1200px media query will apply to all sizes below, meaning that you won't need to re-apply the same values again in the 720px one.
In comparison:
#media screen and (max-width:1200px) {
/* applies to all viewports below 1201px */
}
#media screen (min-width:721px) and (max-width:1200px) {
/* only applies to viewports above 720px and below 1201px */
}
In conclusion, seeing as the values in your second (720px) media query rule is the same as the bigger one, they are applied twice (not necessary).
i think use percentage value to margin and width. You can avoid the resizing problem