I'm trying to make my sidebar fluid so it adjusts with the browser window, and everything seems to be working great, except for the fact that with the media query added, my CSS styling breaks, but when I take the query away it is back to the norming styling from my stylesheet. Can someone look at my code and tell me what I'm doing wrong? Thanks in advance!
BTW, when I add the second ending curly brace to the #rightandoverview media query, the styling go back to the way it should, but the fluidity doesn't work. What could it be?
#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
float:left;
width:30%;
background-color: yellow;
margin-top: 10px;
}
}
#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}
#righthandoverview ul li {
padding-bottom: 6px;
}
Looks like you are missing a bracket to end your first media query
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
}
you missed a bracket in the following code, i have added it.
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
}
Related
Okay guys, I am having a hell of a time trying to get my next classes website to be responsive, least in a way is helpful. My header will not change background images when the viewport is smaller then a desktop(tablet/mobile device). I can get the header's max-height to change, but the background image wont. Any help?
My code is below, but here is a jsfiddle link: https://jsfiddle.net/nb0u8ho7/
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
.show-menu{
font-family:Helvetica,Arial, sans-serif;
text-decoration: none;
color:#FFFFFF;
background:#000000;
text-align: center;
padding:10px 0;
position: relative;
top:-20px;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
#media screen and (min-width: 481px) and (max-width: 959px){
header{
max-height:150px;
background-image: url(../images/logoenclosed.jpg)
}
header h3{
postition: relative;
}
Nav{
margin-right: -6em;
}
nav ul li{
position: relative;
top: -138px;
font-size:75%;
margin-bottom: 1em;
}
section{
float: none;
max-width: 80%;
margin-left: 8%;
}
aside {
float: none;
max-width:50px;
}
#dashboard {
display: none;
}
}
#media screen and (max-width : 480px){
aside{
float:none;
width: 760px;
padding-bottom:1%;
}
#dashboard{
display: none;
}
header{
max-height: 150px;
max-width: 480px;
background-size: 100%;
}
header h3{
display: none;
}
header nav{
position: relative;
top:-123px;
left: -286px;
width:100%;
}
header nav ul{
position: static;
display: none;
}
header nav li{
margin-bottom: 0px;
border-top: 1px solid #252122;
}
header nav li a:hover,
header nav li a.hover{
color: #e1e2dd;
background-color:#000000;
border-radius: 0;
}
header nav ul li,
header nav ul li a{
width: 100%;
float: none;
text-align: center;
background-color: #000000;
padding: 0em 0em 0em 3em;
}
.grills{
float: left;
border: solid black 1px;
width: 30px;
margin-bottom: 1em;
height: 30%;
}
.pic_resize{
width: 100%;
max-height: 50%;
}
section{
float: none;
max-width: 80%;
}
.show-menu{
position: relative;
top: 0px;
display: block;
}
#wrapper{
margin: 0;
padding: 0;
width: auto;
}
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: right;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 10px;
}
article p{
padding: 1.5em;
}
article div{
align-content: center;
margin-left: 1.676em;
}
body{
color: #6D6A6C;
background-color: #131313;
font: 100% Verdana;
}
body h1, h2, h3{
color: #FFFFFF;
}
#ctrtitle{
text-align: center;
position: relative;
top: 210px;
}
footer{
clear: both;
background-color: #000000;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
.grills{
float: left;
border: solid black 1px;
width: 22%;
margin-bottom: 1em;
height: 30%;
}
header{
background: #7b7c79;
background:url(../images/header.jpg);
height: 300px;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav{
align-content: center;
padding: 14.6em 0 0 17.9em;
}
nav ul{
text-align: center;
margin: 0em 5em 0 -16em;
list-style: none;
}
nav ul li{
position: relative;
padding: 0 2em 0 0;
float: left;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a{
background-image: url(../images/nav/nav_1_invert.jpg);
background-size: cover;
transition: background-image .5s ease-out; /*<-- this line will produce a transition */
color: #483838;
}
nav ul li a {
background-image: url(../images/nav/nav_1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position: center;
font-size:110%;
display: block;
color: #ffffff;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
padding:0.6em 0.9em 0.6em 0.7em;/* the same spacing as before */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover ul a:active {
background-image: url(../images/nav/place_holder.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
margin-left:-1px;/* pull them in close! */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
color:white;
}
p{
margin-bottom: 1.2em;
}
#pageholder{
background-image: url(../images/nav/place_holder.jpg);
background-size: cover;
background-size: 121px 50px;
pointer-events: none;
cursor: default;
}
.pic_resize{
width: 100%;
max-height: 35%;
}
.rgt{
float: right;
max-width: 45%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.text{
max-width: 80%;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
I am unsure as to what the heck is wrong with my coding, but I would appreciate any help at all.
Thanks,
-Dark_nemesis
Try adding this in <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After doing some digging, I ended up adding the following lines of code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width:959px)">
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">
and took all of the CSS coding from my previous CSS media queries and make two more, individual .CSS files. This seems to have taken care of the problem, least so far anyway. Thank you all for your help.
P.S. Just in case someone one ends up reading through this trying to figure out a solution to a similar problem, here is some education:
I came to this solution because I read somewhere(I believe it was here on stackoverflow) that the problem may be that before I added the "(min-width:px") and (max-width): portions to my media queries that my normal "desktop" version also had the same widths as the media queries. E.G. My desktop version also had a width of 480px, and 959px. This made my site use my desktop version of CSS for all three queries. I'm not positive is this is the actual reason as to why mine wasn't working, but that made me try the different way, and it seems to work. If I am wrong, please correct me as I am not trying to misinform anyone on anything.
Thanks,
Dark_nemesis
Not quite sure why my media queries aren't working. Very much a beginner. Trying to get the navigation menu to respond similarly to
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Normal media queries don't work either, I know i don't have topnav as the class setting for the nav like they do in the w3 example. I just have been using nav.
/**********************************
GENERAL
***********************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
html, body {
height: 100%;
}
body{
margin:0;
padding:0;
background: rgba(226,226,226,1);
}
a{
text-decoration: none;
}
li{
list-style-type: none;
display: inline
}
#wrapper{
max-width: 100%;
max-height: 100%;
/*min-height: calc(100vh - 120px);*/
/* 80px header + 40px footer = 120px */
width: 85%;
margin: 0 auto;
overflow: visible;
position:relative;
background: rgba(147,206,222,1);
}
img{
max-width: 100%;
width: 200px;
margin-right: 15px;
float: left;
margin-bottom: 20px;
padding:1px;
border:1px solid #021a40;
}
h1{
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
font-family: Garamond;
}
/**********************************
HEADING
***********************************/
header{
color:blue;
text-align: left;
float: left;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
width: 100%;
font-size: 32;
}
/**********************************
NAVIGATION
***********************************/
nav{
max-width: 100%;
max height: 100%;
padding: 3.5em;
margin: 0;
background-color: green;
text-align: right;
font-family: Garamond;
}
nav ul {
list-style: none;
margin: 0 10px 20px; /*pushes div down*/
padding: 0;
text-decoration: none;
/*background-color: purple;*/
max-width: 100%;
max-height: 200px;
}
nav menu:{
}
nav li {
display: inline-block;
}
nav a, a:link, a:visited {
font-weight: 800;
padding: 15px 10px;
/*border-style: double;*/
border-radius: 10px;
margin-bottom: 20px;
color:white;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
a:hover{
background-color: gray;
}
#back-to-hp{
text-align: left;
}
/**********************************
FOOTER
***********************************/
footer {
background: rgba(255,255,255,1);
/*max-height: 100%;
position:relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
overflow:hidden;
text-align: center;*/
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;
padding-top: 10px;
margin-top: 15px;
}
}
/**********************************
PAGE: ADOPTION
***********************************/
#image-paragraph{
font-size: 20;
text-align: center;
float: right;
}
#content{
font-family: Garamond;
}
/**********************************
PAGE: ABOUT
***********************************/
/**********************************
PAGE: CONTACT
***********************************/
/**********************************
COLORS
***********************************/
/**********************************
MEDIA QUERIES
***********************************/
/*#media all (max-width: 960px) {
body{
background-color: royalblue;
}
p{
color:white;
}
}
##media (min-width:481px) and (max-width: 700px) {
}*/
#media screen and (max-width:680px) {
ul.nav li:not(:first-child) {display: none;}
ul.nav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.nav.responsive {position: relative;}
ul.nav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}
You have two media queries set at the max-width of 680px. Possibly one was meant to be a min-width? If not then I don't see why you didn't put all of it under a single media query.
EDIT:
Try changing ul.nav li:not(:first-child) {display: none;} to nav ul li:not(:first-child) {display: none;}.
This is because media queries read css as nested from their parents, so you need to include the parent elements correctly.
Also, from experience, I've noticed visibility: hidden; consistently works better in many scenarios than display: none;. This depends on your element positioning, though. Either works in your case.
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I sometimes want to recode responsive navigations to be mobile-first instead of having styles that adjust to smaller user devices.
Manually recoding CSS to reverse the style cascade from max-width to min-width isn't as quick as I was hoping.
Sample of CSS that could be recoded to be mobile-first: http://codepen.io/bl4ckdu5t/pen/vOBRqL
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 480px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('http://s30.postimg.org/68factszx/nav_icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
I don't know any tool that can help you with that. Here's a good article that can help you to do the changes manually:
link
max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule.
Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule.
I am having some problems with the alignment of the links inside the navbar for the mobile version of my site. When looking at the desktop version, everything is ok. It looks like this:
Code:
.navbar {
margin-top: 30px;
min-height: 50px;
padding: 0;
background-color: red;
background-image: none;
filter: -;
border: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
*zoom: 1;
}
.navbar-inner {
background-color: fuchsia;
background-image: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin-left: 20px;
background-color: #5593f8;
webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Now for the mobile version. It looks like this at the moment:
Code:
#media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
.navbar {
margin-top: 0px;
}
.navbar .nav > li {
float: none;
text-align: center;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin: 0;
}
.navbar .nav {
width: 100%;
background: red;
}
.navbar-inner {
padding: 0;
margin: 0;
}
}
Do you see that small gap on the left where the fuchsia can be seen? I don't want that. I want the links to be width: 100%, but somehow that's not possible. I spend nearly the whole day to figure out what the problem is, but I can't wrap my head around it. Its not margin, its not padding, but what is it? Please help me.
Ok, I got it!
After the media query posted above, I had this:
#media (max-width: 979px) {
.navbar {
margin-top: 0px;
}
.navbar-inner {
padding-left: 5px;
}
}
The 5px declared in the last rule are gap you see in the post above. Moving the rule from this post above the rule from the first post did solve the problem.