#media screen and (min-width:450px){
.dark-blue{
width: 50%;
}
#container2{
width: 50%;
}
}
When this media query triggers, the dark-blue div and the div whose id is container2 will not stay in a row. Specifically, a blank below the dark-blue div is the issue. All I want to know is how to make them symmetrical. More detail in my github.https://github.com/kmfb/udacityProjects/tree/master/model.
I would try something like this:
#media screen and (min-width:450px){
.dark-blue{
width: 100%;
}
#container2{
width: 100%;
}
#container2 div {
width: 50%;
display: inline;
}
}
Related
I have two divs. One is 15%, and the other is 76%. I want to hide the 16% div on mobile phones. That is being achieved using this.
class="navbar hidden-xs"
And the code is as follows
#right {
top: -1px;
position: fixed;
background: blue;
width: 15%;
}
However, when I change the screen size, the box is getting hidden but the space remains there. I want to make the width of the content to 100% in mobile-only. How can I achieve this? My code for the content is as follows:
#content {
float: right;
width: 76%;
}
#media (max-width: 767px) {
#right {
display: none;
}
#content {
width: 100%;
float: none
}
}
I'm new to media queries, and I've watched a few tutorials on the best practices, but it seems i can't get mine to work..
I created a simple text div to make sure it even works, and I'm trying to have the background-color of the div change to blue once the width of the browser is smaller than 500px.
Does anybody know what I'm missing?
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#test_box {
height: 100px;
width: 100px;
background-color: blue;
}
}
<div id="text_box">Test</div>
Here is my demo
you have a typo inside your media query in your id,it is not test_box, but text_box.
plus you don't need to repeat properties already set before, if they have the same value.
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#text_box {
background-color: blue;
}
}
<div id="text_box">Test</div>
I want to place <aside> sidebar column underneath the <article> main column(rather than next to it) to suit smaller screens (mobile devices).
How to achieve it in my two-columned website Home Page?
On desktop screen, current side by side display is fine. Only on smaller screen aside block is not coming underneath article block.
#main {
width: 58%;
margin-left: 2%;
float: left;
}
#sidebar {
width: 34%;
margin-left: 4%;`
float: left;
}
Remove the ' in #sidebar
Demo
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
#media (max-width:767px){
#main, #sidebar {
width: 100%;
margin: 0 0 20px;
}
}
Try to use #media and width: 100%;:
Here's the JsFiddle link demo.
E.g. small screen size: 767px
#media (max-width: 767px) {
#sidebar,
#main {
width: 100%;
margin-left: 0;
}
}
Hope it helps.
I have a simple setup like this :
<div id="div0">
<div id="div1">Content</div>
<div id="div2">Content</div>
</div>
The two middle divs(1,2) have width:100% and max-width:390px plus floatLeft. When resizing the browser div2 will jump a row down and when getting less then width 390 thay will both start to resize.
What I need is to resize to a min-width first and then jump down to the second line.
How do I do that?
Edit1 : example : http://jsfiddle.net/dwDZx/
Here's a responsive example of what you're asking about. I changed some widths to make it easier to follow the example and see where the numbers come from. http://jsfiddle.net/dwDZx/4/
I change background colors in the different responsive layouts to show you which section is active at which point in resizing the browser.
The only change I made to the markup was to create a "content" div inside div1 and div2. This allowed me to set a border. If I set width of div1 and div2 to 50% AND set a border, then the total width would be 50%+2px (1px left + 1px right) which would cause the floats to wrap. By putting the border on the content div, it puts the borders inside the 50% instead of outside.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#div1, #div2
{
float:left;
}
#media (min-width: 801px)
{
#div1, #div2
{
width: 400px;
background: green;
}
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
width: 49.9%;
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
}
}
EDIT: I thought about it and simplified things a bit. See http://jsfiddle.net/dwDZx/5/ The CSS changes as follows: set a max-width on the parent div to be the max width of div1+div2. Then you only need one media state: for when it's < 400px and should be on one line.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#container { max-width: 800px; }
#div1, #div2
{
float:left;
width: 50%;
background: green;
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
background: blue;
}
}
So what I'm trying to do is design a page that has two sidebars and a main article area. As it shrinks down for tablet or phone use though, I want the two sidebars to move so they are stacked vertically beside the main area at first, and then eventually both move below it. The Problem I am having is I can't get them to re-order correctly upon doing so.
The three sections on the left (desktop/tablet/phone) is how I want it. The pages on the right are how it's appearing now. Basically I need 5 to move up under 4, and 3 to move beside 4/5 for tablet view, and then 4 to move down under 3 for phone view.
I hope that makes sense? I'm using Dreamweaver if it helps/matters. Thanks!
Clicky to see what I mean!
It can be done if certain heights are known.
Fiddle: http://jsfiddle.net/BramVanroy/Pt7sS/
The height of #contentWrap and #sideRight need to be known to make this work. If these are not known, you can fetch the heights through jQuery.
html, body, #header1, #header2, #contentWrap {
width: 100%
}
#header1 {
background: red;
height: 50px
}
#header2 {
background: green;
height: 40px
}
#sideLeft, #main, #sideRight {
box-sizing: border-box;
float: left;
height: 200px
}
#sideLeft, #sideRight {
width: 20%;
background: #333
}
#main {
background: grey;
width: 60%
}
#media screen and (max-width: 768px) {
#main {
float: right;
width: 65%
}
#sideRight {
clear: left
}
#sideRight, #sideLeft {
width: 35%;
height: 100px
}
}
#media screen and (max-width: 480px) {
#sideLeft, #main, #sideRight {
float: none;
width: 100%;
position: absolute
}
#contentWrap {
position: relative;
height: 400px
}
#main {
top: 0
}
#sideLeft {
bottom: 100px
}
#sideRight {
bottom: 0
}
}