I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
Related
According to the validator the errors are at line 136 and line 196.
I have tried to remove and change the font-size, because vW isn't a valid font-size, but that didn't change anything.
I hope you can figure out what's wrong with my code.
#media only screen and (min-width: 376px) {
.navbar {
float: right;
overflow: hidden;
background-color: #BA6815;
position: static;
top: 0;
width: 51%;
height: 50%;
}
.tabletfoto img {
display: inline;
float: right;
width: 51%;
}
.titel {
text-align: center;
font-size: 4.5vw;
color: #001111;
}
.titelnavbar {
text-align: center;
color: #001111;
font-size: 5.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
font-size: 3vw;
}
}
#media only screen and (min-width: 1025px) {
.tabletfoto img {
display: none;
}
.navbar {
overflow: hidden;
background-color: #BA6815;
position: fixed;
top: 0;
max-width: 14%;
height: 100%;
}
.navbar a {
float: left;
display: block;
color: #FFFFFF;
text-align: center;
padding: 15% 13%;
text-decoration: none;
font-size: 1.5vw;
}
.navbar a:hover {
color: #AA0000;
font-size: 2vw;
}
.titel {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
width: 100%;
}
.titelnavbar {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
margin-left: 15%;
font-size: 2vw;
}
}
Underneath here the error I keep getting:
vw is valid as a font-size but the validator isn't up to date.
Note the CSS version it's using is 2.1 which is very old.
If it works, ignore it - unless you are trying to support browsers which do not support anything after 2.1. In that case, use a fallback font-size.
So here is the css code and when i go to developer tools (Mozila) the code isn`t executed in responisve mode as it should.
The margin-left:auto; is underlined as u can see in the picture that i uploaded.
I am new to responsive design.If you wanna see the whole project(page) click here, please help.
Developer tools image
#media screen and (max-width: 750px) {
img {
margin-left: auto;
}
}
body {
margin: 0;
overflow: auto;
background-color: #a6a6a6;
}
img {
margin-left: 40%;
}
p {
text-align: center;
font-size: 1.2em;
}
ul {
font-size: 1.3em;
margin-left: 15%;
margin-right: 15%;
}
small {
text-align: center;
margin-left: 45%;
}
hr {
display: block;
height: 1em;
border: 0;
border-top: 0.1em solid #4d4d4d;
margin-right: 10%;
margin-left: 10%;
padding: 0;
}
#title {
float: left;
text-align: center;
background-color: #cccccc;
width: 100%;
top: 0;
position: fixed;
margin-left: 0;
font-size: 1.25em;
}
#content {
background-color: #e6e6e6;
margin-left: 5%;
margin-top: 10%;
margin-right: 5%;
margin-bottom: 6%;
}
#e {
font-size: 2em;
}
#timeline {
font-size: 1.5em;
}
#sources {
font-size: 1.8em;
}
#Author {
font-size: 1.6em;
}
a {
cursor: pointer;
text-decoration: none;
}
a:visited {
cursor: pointer;
text-decoration: none;
color: blue;
}
a:hover {
cursor: pointer;
text-decoration: none;
}
Order of declarations in CSS matters. Move the media query BELOW the img { margin-left:40%; } and it should work.
The media queries you see in style sheets tend to be better placed at the bottom. Place
#media screen and (max-width:750px){
img{
margin-left:auto;
}
}
underneath the last CSS declaration
my bootstrap mobile style won't render unless I add a extra closing brace to the end can someone tell me what I did wrong
this is the styles that I created and they should work but they are not working and they pass the validator test.
#media only screen and (max-width: 766px){
.movie{
width:300px;
height: 300px;
margin:0;
padding:0;
}
body > div > div > h3 {
margin-left: 300px;
padding-top: 200px;
}
a:link {
outline: 0;
font-size: 9px;
display: block;
padding-right: 50px;
}
h3{
font-size: 20px;
margin-top:20%;
}
h3.port {
margin-left: 150px;
color: #9932CC;
margin-top: 50px;
}
img {
float: left;
margin-right: 15px;
width:50%;
height:50%;
margin-top:0;
}
p {
margin-left: 10px;
margin-top:5%;
padding: 0;
color: #9932CC;
font-size: 15px;
}
.navbar .nav > li > a {
color: #9932CC;
}
body > div > div > a > img {
display: none;
}
.navbar-brand {
float: left;
padding: 10px 15px;
font-size: 20px;
}
/* twitter
====================================== */
div#iPhone {background: url("../images/iphone.png") no-repeat;
width:275px;height:500px;
display: inline-block;
padding-top: 90px;
padding-left:2em;
margin-left: 0px;
}
iframe#twitter-widget-0.twitter-timeline[style] {width:70px !important;}
div#iPhone iframe[id^="twitter-widget-0"] {min-width:170px !important;
margin-right: 20px;
}
/* iframe
======================================= */
.movie {
text-align: center;
width: 350px;
height: 345px;
margin-left: 0px;
margin-right: 200px;
}
.paragraph {
width: 50px;
margin-left: 10%;
}
.thumbnail {
color: #333;
margin-left: 100%;
width: 100%;
background-color: transparent;
border:0px;
}
.btn-primary {
color: #000;
background-color: #aff6b8;
border-color:black;
margin-top: 5%;
width:100%;
}
}
}
mobile style won't render unless I add a extra closing brace to the end
Yes, the #media syntax involves an extra set of braces:
#media only screen and (max-width: 766px) {
element {}
}
The last closing brace you added is equivalent to the last one in the code above.
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you
SOLVED: Tom: You were so right. Unfortunately WordPress function wp_head() was adding the width=1100 because of a plugin. Thanks!
I'm working on a new responsive website, but can't seem to get the #media query to work.
It does work when resizing the browser window on my desktop, but it won't work on my ipad, iphone or android phone.
What am I doing wrong?!
Here the link: http://demo.mindspins.com/atmnieuw/
Here's the link to the CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php
Thanks in advance!
On request the CSS code:
#media all and (max-width: 1460px) {
.site-width{ width: 1199px; }
.main-width{ width: 719px; }
}
#media all and (max-width: 1220px) {
.site-width{ width: 959px; }
.main-width{ width: 479px; }
#page-title h1.thetitle{
font-size: 20px;
line-height: 24px;
}
.sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
font-size: 20px;
line-height: 24px;
}
}
#media all and (max-width: 980px) {
.site-width{ width: 719px; }
.main-width{ width: 479px; }
.right-width{ display: none; }
#header-right{ display: none; }
.widgets-wrapper-1{ display: block; }
.widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
#media all and (max-width: 740px) {
.site-width{ width: 95%; margin: 0 auto;}
#header-wrapper{ width: 100%; }
#header-left{ display: none; }
#header-mid{ height: 80px; }
#atmlogo a.atm {
z-index: 100;
top: 24px;
left: 0;
}
.main-width{ width: 100%; }
.left-width{ width: 100%; }
.sidebar-left{ display: none; }
.site-bg{ display: none; }
#header-left span.header-contact{ height: 80px; width: 100%;}
#main-nav{ height:auto !important; }
#mobile-nav{
margin: -4px 0 1px 0;
display: block;
position: relative;
width: 100%;
}
#mobile-nav .nav-wrapper{
display: block;
color: #fff;
background: #cc0033;
margin: 1px 0;
height: 40px;
padding: 0 10px;
}
#mobile-nav .nav-wrapper select.atm-dropdown{
font-size: 12px;
display: block;
height: 40px;
width: 100%;
color: #fff;
background: #cc0033;
border: 0;
clear: both;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#mobile-nav .theme-s{
width: 100%;
background: #cc0033;
color: #fff;
}
#mobile-nav input.s{
background: #cc0033;
color: #fff;
}
#mobile-nav input.searchsubmit{
border-left: solid 1px #dcdcdc;
color: #fff;
background: #cc0033;
background-image: url(../images/icon_search.png);
background-repeat: no-repeat;
background-position: right top;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#primary{ display: none; }
#main-content-header{
height:auto !important;
margin: 0 0 1px 0;
}
#main-content-header span.header-image{
display: block;
float: left;
width: 25%;
height:auto !important;
margin: 0;
}
#main-content-header span.header-image img{
line-height: 0px;
margin: 0;
padding: 0;
}
#page-title{
height: 79px;
}
}
#media all and (max-width: 500px) {
body {
font-size: 12px;
line-height: 20px;
}
#footer-nav{ display: none; }
#copyrights{ display: none; }
.entry-content-bg{ padding: 20px; }
#page-title .title-wrapper{ padding: 0 20px }
#page-title h1.thetitle{
font-size: 16px;
line-height: 20px;
}
}
You can use this code in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
On looking again, when using my iPhone 4S and the Remote Web Inspector introduced in iOS 6, I couldn't find any styles for anything below max-width: 1200px, even though they are in the CSS file. I don't know why this is.
Also, I wrote a blog post about Responsive design and Media Queries a few months, you can read it here if you wish. Not saying you're not good at media queries (it's a very nice site!) just hope it will be an interesting read for you :)
EDIT: just looking at your site again, I noticed in the head (right at the bottom) you have this code:
meta name="viewport" content="width=1100"
This could be why the styles weren't applying at anything below a screen width of 1100px or 1200px. Take this out and try it again.
It might have something to do with having your CSS in seperate files. As a general rule you should always write all your CSS in one file (style.css). It shouldn't do but just for clarity put them both in the same file and see what happens. If it doesn't work comment on this and I'll take another look.