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
}
}
Related
I have a footer container. There are some menu items and two paddels(left and right) to scroll left and right the menu. There are one description text and one log link.
Now, if the screen size is more than 768px then all these three divs( menu, description text, log link) are in same line. Which is fine. But, if i choose screen size less than <768px then as per my application design will be like this below.
< Menu >
Description text Log link
Here is the screenshot for less than <768 px.
Now, description text and log link aren't in same line . Because of repair log width, menu inner wrapper is hided behind the screen. How to solve this?
Here is my css style for less than (768 px screen)
#media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
div{
display:inline;
}
}
.div2{
float:right;
}
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<body/>
You can check out this code just add display:inline; in the CSS of the div.
#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;
}
}
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.
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.
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
}
}