I currently have a footer with 3 sections layed out as follows:
.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }
I want them to change layout at 768px and 480px. At 768px, I have the following (to stack the first on top, with the #2 & 3 splitting the space underneath it):
.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }
At 480px (to have all 3 stack and take up the width) I have:
.foot2, .foot3 { width: 98%; float: none; }
My problem is that at 480px and under, the widths are not being followed and are still staying at 48%. If I use 'inspect' in Chrome, I can see that the 'float: none;' is being followed, but not the width from the media-query.
Does anyone have any idea why it would choose to recognize the float declaration but not the width: 98%?
Thanks!
I attempted to reproduce the issue you are having but was unable to do so.
I believe that my test code below works as you desire. How is your code different from the below html/css?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.foot1 { background: tan }
.foot2 { background: green }
.foot3 { background: blue }
.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }
#media screen and (max-width: 768px) {
.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }
}
#media screen and (max-width: 400px) {
.foot2, .foot3 { width: 98%; float: none; }
}
</style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>
Related
I want to have three different layouts of my web page for different browser widths (i.e. desktop, tablet, phone).
In the tablet layout (between 768px and 991px of the browser) I should have three elements, two in the first row (thus each of them taking 6/12 of the browser width) and the a third in the second row (taking 12/12 of the browser width).
This is what I want:
What I want - IMAGE
But I have a problem with this layout:
I am not able to set the third element borders aligned with the left and right borders of first and second element, as you see.
This is what I have done:
What I have - IMAGE
Can you help me?
Note: I want the element '3' wide as '1'+'2' width only for tablet layouts! For other layouts I want what I already did, i.e same width for every element (1,2 or 3).
This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p1"> Chicken</p>
</div>
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p2"> Beef</p>
</div>
<div class="col-lg-4 col-md-12 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p3"> Sushi</p>
</div>
</div>
</body>
</html>
This is the css:
/* width and height will include border and padding */
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
}
/*Set an anchor for the container of p elements*/
div.anchor{
position: relative;
}
#p1{
background-color: yellow;
}
#p2{
background-color: #ff0000;
}
#p3{
background-color: #ffaabb;
}
/*.col-md-12 .content{
margin-right: 2.5%;
margin-left: 2.5%;
*/
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
margin-right: 5%;
margin-left: 5%;
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 0px;
right: 0px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
margin-right: 5%;/*inherit; 22.525px; inherit*/
margin-top: 16px;
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/********** desktop devices only **********/
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
}
/********** Tablet devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
float: left;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-12 {
width: 100%;
/*margin-right: -5.5%;
margin-left: -2.8%;*/
}
}
/********** mobile devices only **********/
/* the floating is only defined inside the media queries.
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */
#media (max-width: 767px) {
.col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
float: left;
}
.col-sd-9 {
width: 74.99%;
}
.col-sd-10 {
width: 83.33%;
}
.col-sd-11 {
width: 91.66%;
}
.col-sd-12 {
width: 100%;
}
}
Thank you!
check this fiddle
div.anchor{
position: relative;
padding: 0 15px;
}
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
/* margin-right: 5%;
margin-left: 5%; */
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 16px;
right: 15px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
/* margin-right: 5%;inherit; 22.525px; inherit
margin-top: 16px; */
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
EDITS:
removed margin left and right on p.content and p.my-title, added padding on div.anchor and top and right position on p.my-title
I need your help, I face a problem with my css media query code.
I just wrote the following css media code
#media (max-width: 900px) {
#content {
width: 100%;
margin: auto;
}
#recent_activities .act {
width: 94%;
padding: 3% 10px;
background-color: #FFF;
text-align: left;
margin-bottom: 10px;
margin-left: 0px;
height: inherit;
}
#header_container
{
display: none;
}
#footer {
width: 94%;
margin: auto;
padding: 3% 0px;
text-align: center;
}
}
my problem is that the code works perfectly on the computer screen when I re-size the browser window but unfortunately it does not work on my smart-phone (Xperia Z).
Just put the following meta tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
hope that helps.
Wow I am really struggling.
I have created responsive themes for many many sites but can't get it to work on my own!
The dev version of the site is at Development Site and the CSS for the phone part of the stylesheet is below:
#media only screen and (max-width: 767px) {
* {
float: none!important;
width: 100%!important;
}
#container, #home-boxes, #header, #home-scroller, #main-nav, #main-footer, #content, #sidebar {
width: 100%!important;
overflow:hidden;
float: none;
}
.wrapper {
width: auto;
margin: 0;
}
#header {
width: auto;
}
#home-scroller h1 {
font-size: 50px;
}
#home-scroller h1 span {
font-size: 30px;
}
#home-scroller p.home-price {
font-size: 30px;
}
#home-scroller a.button, #home-scroller a.buttonalt {
display: block;
}
#home-scroller p.bottom {
position: inherit;
}
ol.dots { display: none; }
#home-scroller li {
width: 100%;
}
#main-nav {
float:none;
}
#home-boxes-inner .home-box, .footer-box {
float: none;
width: 100%;
margin-right: 0;
}
img {
width: 100%;
height: auto;
}
#logo {
float: none;
}
}
As you can see if you visit the site on a mobile it's not even close to being anywhere near correct.
Does anyone have any pointers on where I should be looking?
Much appreciated!
The hard coded html-width conflicts with this nice meta setting :
html {
min-width: 1060px; /* hard coded width for large screens */
}
#media only screen and (max-width: 767px) {
/* new: fit viewport to small device screen */
min-width: 100%
}
Try changing your meta width tag from
<meta wisth...
To
<meta width...
I am having this CSS style, which i am trying to run on chrome v28, Firefox v222 and IE8:
html, body{
margin: 36px;
width: 100%;
background-color: black;
}
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
background-color: red;
}
}
and as a markup I add:
<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>
Just want to understand why it is not changing color to red if I minimize the window.
Any Help will be great help.
Thanks
Raja
#page has no content thus it has height:0px; Try the following: (working jsFiddle)
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
height:100%; /* set the height */
background-color: red;
}
}
As for the addition to the question - changing the background - You will have to reverse the order of the CSS like this:
<style>
html, body{
margin: 36px; width: 100%; height: 100%;
}
body{ background-color: black; } /* This should be first for the media query to override */
#media screen and (max-width: 768px){
html, body{ margin: 20x; }
body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
}
</style>
I'm sure this is quite a basic question, so apologies in advance as I am new to this.
I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.
The idea is to then use suitable media queries to which when encountering smaller screens use display:block to prevent the image being displayed.
For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .
The HTML looks like this ...
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
My CSS is currently this ...
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
You're not closing the first media query. :-)
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
} // you missed this one
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}