I have to apply height for two different screen 1080px and 1000px.
I have added following media query:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
When i switched to 1080px the issues remain's same, it call's the media query for 1000px.
http://ddslauncher.com/inventory-new/
Thanks in advance.
The media queries in your example are the other way round from your question. They are:
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;;
}
}
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;;
}
}
(the issue here is that when the screen is below 100px in height both queries match and the second one is applied ass CSS 'cascades' down.)
instead of:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
Using this second example should fix your issue.
EDIT Apologies for the formatting issues, something is interfering with my SO edits.
You can use the percentage width instead of fixed. something like the following. Also it would be great if you can run the media query based on Viewport width not height.
#media only screen and (max-height:1080px){
#wrapper {
width: 100%;
height: 1080px;
float: left;
}
}
I saw yours stylesheet. in css u have "min-height". I suggest to change into max-height, and used "!important" adnotation.
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 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.
Hi I am almost finished with my website but I have a small issue of the columns not displaying at 100% when on a mobile device, I do not know what I have done wrong in the css below but the max-width 320px does not seem to be making the column go 100% when on mobile.
here is a link to my site to see what happens
http://www.ico.mmu.ac.uk/08506125/portfolio/index.html
I know it's a really simple solution...
#media(max-width : 320px){
.column.half { width: 100%;}
}
/* Column sizes */
#media (min-width: 40rem)
.column {
float:left;
padding-left:1em ;
padding-right:1em;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
/* Column sizes end */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
.third { float:left; display:inline;}
.half { float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image { border-style: double; border-color:white;}
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
Just put this condition in the bottom because you override it with your default width.
.column.half { width: 50%;}
#media(max-width : 320px){
.column.half { width: 100%;}
}
please notice "half" class stop getting "float left" on 640px so you've got the issue already from there...because there are devices with bigger screen resolution, maybe it can be better for you to change 320px to 640px:
#media (max-width: 40rem){
.column.half
{
width: 100%;
}
}
I want to know how to size my images in #media screen and max-width:640.
My style.css:
#header-wrapper
{
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-position:center;
width:auto;
height:768px;
}
My mobile.css:
#media screen and (max-width: 640px) {
header-wrapper {
width: 600px;
}
So the width is only applied to to the header-wrapper..
I also tried to give the header-wrapper in mobile.css another image
(which I sized in photoshop to mobile size).
But this didn't work either. I think because the image of the header-wrapper overwrite it in style.css?
background:url(images/fox-illustration.jpg);
background-size:600px 400px;
background-repeat:no-repeat;
Do this
First make sure your mobile.css is active.
If the second part of your code is at it is set now, you are probably missing an id tag in the css.
Try changing your
header-wrapper {
width: 600px;
}
to
#header-wrapper {
width: 600px;
}
Other than using fixed background size, you can use cover and follow the width of the #header-wrapper
#header-wrapper {
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-size:cover;
width:auto;
height:768px;
}
#media screen and (max-width: 640px) {
#header-wrapper {
width: 600px;
}
}
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
}
}