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
Related
Not sure how to explain this but here I go:
I have 2 buttons (variable width, depending on the text inside) which are positioned next to each other (picture on top). When I make my screen smaller (picture at bottom), the buttons expand the parents width and position below each other. Is there a way to check when this happens?
I want to set a margin (so buttons don't stick to each other) and set a fixed width, ONLY when the buttons are positioned below each other, because of design reasons.
As far as I know, each browser renders a little bit different, and I also want a solution that will keep working when I decide to change the buttons text.
How would you do this? Is there a plugin or a simple jQuery script that can check this?
This is what I have so far: JSFiddle
<div class="cta-buttons-wrapper text-center">
this is button one
and button two
</div>
.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }
.btn{
margin: auto 25px;
// ...
}
.btn-primary{
color: #fff;
background-color: lightgreen;
border-color: lightgreen;
}
.btn-primary-reversed{
color: lightgreen;
background-color: #fff;
border-color: lightgreen;
}
If you don't want to stick buttons add following css
.cta-buttons-wrapper .btn{ margin: 10px 15px; }
And for button width you need to set specific width for that using media query
#media (max-width: 767px) {
.cta-buttons-wrapper .btn
{
display:block;
width:60%;
}
}
This can be achieved without the need of a jQuery plugin, in CSS you can declare a media query for certain screen sizes and within that media query you can add different styles for the buttons that would only apply at that screen size, for example if the buttons are not displaying as you wish on mobile screen sizes you would add the below media query that would trigger at screen sizes that are 767px or less, like so:
#media (max-width: 767px) {
.cta-buttons-wrapper .btn {
display:block;
width: 100%; /* this will make the buttons span the width of the parent div */
margin: 0 0 30px 0;
}
}
I have declared width: 100%; so that the buttons span the width of the parent div on mobile only and when you add more text it will still look neat, whereas with a fixed width it does not give you that flexibility.
Here is an updated link to your fiddle with my added solution:
Fiddle
You can simply do this with CSS.
#media (max-width: 767px) {
.btn {
margin: 25px;
}
}
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/
I have a responsive layout where the sidebar drop below the content in mobile.
In full width the list of items in the sidebar are at 100% width. So its like one item in one row...
In mobile I want 2 items in 1 row... by setting the width of each item to 50%. Not sure where I am going wrong...
DEMO: http://jsfiddle.net/nN6Zt/
#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}
#media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}
You have given 50% width to item, give it to list-item
Working Demo : http://jsfiddle.net/surjithctly/nN6Zt/2/
#item {width:100%;
background:#eeefff;
float:left;
}
#list_item {
width: 49%;
float: left;
}
49% to avoid breakage.
Or you can use box-sizing:border-box; as Tom mentioned.
#list_item {
width: 50%;
float: left;
box-sizing:border-box;
}
You have assigned the css for div but a doesn't have any css assigned to it....since your end child element is a a tag, its more semantic to assign a styling to it for all media queries use!
amend this s to your css for #media only screen and (min-width:480px) and (max-width: 768px) {} (or whichever was required to bring in the effects)
#item > a#list_item {
display:inline-block;
width:48%; /* to avoid any clash for breaking */
}
demo
I truly wouldn't be posting a question if I hadn't already spent hours digging through files and researching. I must really not know what I'm looking for :-|
I want to know how and why divs in a container (or the container itself) can change to 100% width when a responsive design is scaled to iphone dimensions - like the below:
http://demo2.woothemes.com/whitelight/about/
the sidebar sits underneath the main content, then the divs inside stretch to 100%
It's driving me absolutely mad! Any help / direction must appreciated :)
Basic Media query responsive layout example:
Demo: http://jsbin.com/ayojan/1/edit
Resize browser to see effect.
div {
outline:solid black;
}
.content {
width:80%;
float:left;
}
.sidebar {
width:20%;
float:left;
}
#media only screen and (max-width: 767px) {
.sidebar {
width:100%;
float:none;
}
.content {
width:100%;
float:none;
}
}
Key points: inside the media query you unfloat the elements (float:none) and set them to width: 100%;
How do I override the width of #mydiv in the media query so it is basically 100%? If I explicitly set it to 100% that will push padding outside of the div, creating horizontally scrolling on a smaller screen.
In Safari Developer Tools style pane, I can uncheck width:800px and everything looks fine at the smaller screen. How do I translate that into code? What is the uncheck/toggle doing to width in code?
#mydiv {
width:800px;
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
}
As requested, publishing:
Simply apply box-sizing:border-box; to your CSS for the item, and it will fit width:100%; just fine.
As a side note, you should consider applying it to everything at the top of your CSS:
* {
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* iOS4, < Android 3.0 */
box-sizing:border-box;
}
There is a great article here about the many advantages (for one, it works all the way back to IE8). I personally use it on all my projects, never fails me.
You could use box-sizing, however, you could also use any of the following as well:
#mydiv {
width:800px;
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
width:auto; /* this will put the width back */
}
or
#mydiv {
max-width:800px; /* this will constrain the width to a maximum of 800, but will have a different effect for widths between 800px and 450px */
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
}