I have a few media queries on my CSS. They were working perfectly a few days ago but I've just noticed that none of them are doing anything. Here they are in context (at the end), and this is my code:
/* MOBILE OPTIMISATION */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
width: 89%;
margin: 0;
}
.post-entry {
width: 100%;
}
.widgets {
display: none;
}
p.frontpage_jobs {
width: 100%;
float: none;
}
#blog-wrap {
width: 100%;
}
.post-entry header h1 {
font-size: 1.5em;
}
}
/* TABLET OPTIMISATION */
#media screen and (max-width: 800px) {
body {
width: 89%;
//float: none;
margin: 0;
}
.post-entry {
width: 100%;
}
.widgets {
display: none;
}
p.frontpage_jobs {
width: 100%;
float: none;
}
#blog-wrap {
width: 100%;
}
.post-entry header h1 {
font-size: 1.5em;
}
}
#media screen and (max-width: 1200px) {
#main-content {
width: 1200px;
}
.widgets {
display: none;
}
}
EDIT
My site is here.
Your media-queries seems to be working. Looks like you have an overflow problem. Removing "width:850px;" on .post-entry, the widths set for #main-content and the side-paddings on body as well as "width:98%;" solves the problem on the client-side for me.
That is, if it is a fluid resizing you are looking for.
Related
I have been trying to figure this out, and just don't see what is wrong. So frustrating, but wanted to see if anyone can see why when resizing the browser window, the site is not responsive. However, inside of Chrome's and Firefox's inspector tools, I am able to see the website being responsive with different device sizes. I have been using #media screen (max-width) NOT device-width, which I know can cause this issue. I appreciate the help!
/***MEDIA QUERIES*****/
#media screen (max-width: 880px) {
#location-icon {
margin: 5px 10px 90px 0;
}
}
#media screen (max-width: 760px) {
.first-footer {
flex-direction: column;
}
#location-icon {
margin: 5px 10px 40px 0;
}
.copyright {
margin: 0;
}
.first-footer {
padding-bottom: 0;
}
}
#media screen (max-width: 375px) {
.intro {
flex-direction: column;
}
.intro img {
width: 100%;
}
.intro div {
padding-right: 0;
padding-bottom: 20px;
text-align: center;
}
.intro button {
margin: 40px 0;
}
.logo-button button {
padding: 20px;
width: 200px;
}
.logo-button img {
width: 100px;
}
.box {
flex-direction: column;
padding: 30px 40px;
text-align: center;
}
.mid-text {
order: 2;
padding: 0;
}
#location-icon {
margin: 5px 10px 100px 0;
}
.list1 {
margin: 30px 0 0 0;
}
.list2 {
margin: 0;
}
.icons {
align-self: center;
text-align: center;
margin-top: 30px;
}
.copyright {
margin: 0;
}
.first-footer {
padding-bottom: 0;
}
}
First off, you need to add "and" when you write a media query with two conditions like this :
#media screen and (max-width: 880px)
However the reason it isn't working is due to your container class in the body tag. If you remove it, it will fix most of your issues since there is no reason to use grid in that context
http://codepen.io/kjohnson/pen/azBvaE
My friend and I are thinking of using that timeline in our website. But the problem is we've 5 sections that needs to be added to timeline, whereas the original timeline have only 3 sections.
I've tried to add two more sections to that code, but it's losing its shape and responsiveness.
Is it possible to extend that timeline and maintain its responsiveness?
HTML
<!-- STEPS -->
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
If you a novice I'd recommend you LEARN first. Copy templates/snippets is good to save your time when you know what you are doing.
I found a perfect tutorial for you here
Just to emphasize that's my opinion, I hope it helps in a certain way..
EDIT: If still want to develop in that way here's a codepen snippet with a fully responsive horizontal timeline. Just have to put more <li> inside the <ul>
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...
Here's my CSS:
div.imgbeequick
{
background: url('../img/beequick400-135.png') no-repeat center top;
display: inline-block;
vertical-align: center;
width:45%;
margin:auto;
height:135px;
}
aside
{
padding:5px;
vertical-align: center;
color:black;
float:right;
}
#media screen and (min-width: 1076px)
{
div.imgbeequick
{
width:45%;
}
aside
{
clear: both;
float: right;
vertical-align: center;
}
}
#media screen and (max-width: 1075px)
{
div.imgbeequick
{
width:100%;
}
aside
{
float: none;
width:80%;
margin:auto;
text-align:center;
}
}
The problem is the aside button doesn't float right when I expand the window to more than 1076 px (but it floats if the page size during refresh is more than this size)
Here's a link to the whole page: http://javascript-ninja.fr/beequickcomm/
The aside button contains the input, the div.imgbeequick is the image of the bee
Replace float:right; in the aside class with display:inline-table
#media screen and (min-width: 1076px)
{
div.imgbeequick
{
width:45%;
}
aside
{
clear: both;
display: inline-table;
}
}
Oh, and one more thing...there's no such thing as vertical-align: center; the value you meant was propably 'middle', but it is not necessary in your case.
The inline-table value does not have a direct mapping in HTML. It
behaves like a HTML element, but as an inline box, rather than
a block-level box. Inside the table box is a block-level context. (source)
May be, this changes helps you to get what you need:
#media screen and (min-width: 1076px) {
div.imgbeequick {
width:45%;
float: left; /* ADDED */
}
aside {
/*clear: both; REMOVED */
float: right;
vertical-align: center;
}
}
#media screen and (max-width: 1075px) {
div.imgbeequick {
width:100%;
float: none; /* ADDED */
}
aside {
float: none;
width:80%;
margin:auto;
text-align:center;
}
}
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;
}
}