I am attempting to create a media query to shrink the menu and remove an element from the page. I've been working on it for three days and I'm stuck. At present I have the media query (@media (max-width: 1013px))reducing the size of the menu (.header) font, but I can't get it to reduce the space between the menu items. I've tried reducing the padding on a number of the related elements but no dice. The second issue which I believe may be related is that when I resize window it does remove the sidebar (.sidebar) as desired but I can't get the other element in the window (.whiteBoxHalf) to take up the rest of the space, it just reserves the empty space. So what I need is for the spacing of the menu @1013px to reduce the font to small (this I've done), shrink the space between the menu items, remove the .sidebar and make the .whiteBoxHalf to take up the entire .box div.
I'm using the social buttons code from here. Also I had to make some changes to bootstrap.css because it was conflicting with the rest of my styles so here that is: bootstrap.css:
button,
input,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: 100%;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
/*input[type="checkbox"],
input[type="radio"] {
padding: 0;
box-sizing: border-box;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}*/
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
bootstrapsocial.css:
.btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon>:first-child{border:none;text-align:center;width:100% !important}
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
.btn-google{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google:focus,.btn-google.focus{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
.btn-google:hover{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
.btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}.btn-google:active:hover,.btn-google.active:hover,.open>.dropdown-toggle.btn-google:hover,.btn-google:active:focus,.btn-google.active:focus,.open>.dropdown-toggle.btn-google:focus,.btn-google:active.focus,.btn-google.active.focus,.open>.dropdown-toggle.btn-google.focus{color:#fff;background-color:#a32b1c;border-color:rgba(0,0,0,0.2)}
.btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{background-image:none}
.btn-google.disabled,.btn-google[disabled],fieldset[disabled] .btn-google,.btn-google.disabled:hover,.btn-google[disabled]:hover,fieldset[disabled] .btn-google:hover,.btn-google.disabled:focus,.btn-google[disabled]:focus,fieldset[disabled] .btn-google:focus,.btn-google.disabled.focus,.btn-google[disabled].focus,fieldset[disabled] .btn-google.focus,.btn-google.disabled:active,.btn-google[disabled]:active,fieldset[disabled] .btn-google:active,.btn-google.disabled.active,.btn-google[disabled].active,fieldset[disabled] .btn-google.active{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
.btn-google .badge{color:#dd4b39;background-color:#fff}
.btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:focus,.btn-facebook.focus{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
.btn-facebook:hover{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}.btn-facebook:active:hover,.btn-facebook.active:hover,.open>.dropdown-toggle.btn-facebook:hover,.btn-facebook:active:focus,.btn-facebook.active:focus,.open>.dropdown-toggle.btn-facebook:focus,.btn-facebook:active.focus,.btn-facebook.active.focus,.open>.dropdown-toggle.btn-facebook.focus{color:#fff;background-color:#23345a;border-color:rgba(0,0,0,0.2)}
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{background-image:none}
.btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled.focus,.btn-facebook[disabled].focus,fieldset[disabled] .btn-facebook.focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
.btn-facebook .badge{color:#3b5998;background-color:#fff}
Here's the css:
@font-face {
font-family: 'HelveticaNeue-Thin';
src: url('../Resources/HelveticaNeue-Thin.woff') format('woff');
}
@font-face {
font-family: 'HelveticaNeue';
src: url('../Resources/HelveticaNeue.woff') format('woff');
}
@font-face {
font-family: 'fontawesome-webfont';
src: url('../Resources/fontawesome-webfont.ttf') format('truetype');
}
@keyframes cloud1 {
0% {
left: -488px;
top: 100px;
}
100% {
left: 100%;
top: 100px;
}
}
@keyframes cloud2 {
0% {
left: -215px;
top: 200px;
}
100% {
left: 100%;
top: 200px;
}
}
@keyframes cloud3 {
0% {
left: -421px;
top: 300px;
}
100% {
left: 100%;
top: 300px;
}
}
@keyframes cloud4 {
0% {
left: -359px;
top: 400px;
}
100% {
left: 100%;
top: 400px;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
background-image: linear-gradient(#B2D2EA, #ffffff);
overflow-x: hidden;
}
.header {
background-color: #fff;
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 3;
font-family: HelveticaNeue-Thin;
font-size: medium;
}
.header ul {
align-self: center;
height: auto;
margin: 0;
padding: 8px 5%;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.heading li {
display: inline;
margin-right: 0;
padding: 5px;
}
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
white-space: nowrap;
color: #171581;
}
.header li a span {
transition: 0.5s ease;
border-bottom: 3px solid transparent;
}
.header li a:hover span {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
a::after {
display: block;
content: attr(title);
font-family: HelveticaNeue-Thin;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
margin-bottom: -1px;
}
#about {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#residential {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#myaccountdetails {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#faq {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#contactus {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
.header .logo {
display: table-cell;
height: 100%;
padding-left: 5%;
vertical-align: middle;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*End of code added for menu*/
/*Style menu icon*/
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #80BD01;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #80BD01;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/*End of style for men icon*/
/*Icon and menu animations when the checkbox is clicked*/
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/*End of menu and icon animations*/
/*Show the horizontal menu items for larger browser widths by default*/
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
margin: 0;
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/*End of menu items for large browser widths*/
/*Reduce menu size for smaller displays*/
@media (max-width: 1013px) {
.header {
font-size: small;
}
.sidebar {
display: none;
}
}
/*End of menu size for smaller displays*/
.page-content {
font-family: HelveticaNeue;
margin-left: 10%;
margin-right: 10%;
padding-top: 50px;
padding-bottom: 100px;
max-width: 100%;
height: auto;
text-align: center;
}
.cloud1 {
animation-name: cloud1;
animation-duration: 70s;
animation-iteration-count: infinite;
position: absolute;
top: 100px;
left: -488px;
z-index: -1;
}
.cloud2 {
animation-name: cloud2;
animation-duration: 50s;
animation-delay: 30s;
animation-iteration-count: infinite;
position: absolute;
top: 200px;
left: -215px;
z-index: -1;
}
.cloud3 {
animation-name: cloud3;
animation-duration: 40s;
animation-delay: 20s;
animation-iteration-count: infinite;
position: absolute;
top: 300px;
left: -421px;
z-index: -1;
}
.cloud4 {
animation-name: cloud4;
animation-duration: 60s;
animation-delay: 45s;
animation-iteration-count: infinite;
position: absolute;
top: 400px;
left: -359px;
z-index: -1;
}
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bottom {
position: relative;
height: auto;
width: 100%;
}
.grass {
height: 20px;
width: 100%;
background-color: #80BD01;
}
.padtb30 {
width: 100%;
position: absolute;
bottom: 0;
height: 80px;
line-height: 80px;
background-color: #ffffff;
text-align: center;
}
.buildings {
display: block;
margin: 0 auto;
}
.padt120 {
position: absolute;
width: 100%;
height: 100px;
bottom: 100px;
background-image: url("../Images/backcity.png");
background-position: center;
}
.copyright {
font-family: HelveticaNeue;
}
.loginForm {
font-family: HelveticaNeue;
}
.body p {
font-family: HelveticaNeue;
font-size: large;
color: #171581;
}
input[type=submit] {
background-color: #171581;
border: none;
border-radius: 2px;
color: #ffffff;
width: auto;
margin-left: auto;
margin-right: auto;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;
text-decoration: none;
display: block;
font-size: larger;
outline: none;
box-shadow: 0 3px rgba(153, 153, 153, 0.6);
}
input[type=submit]:hover {
background-color: #13126e;
}
input[type=submit]:active {
background-color: #13126e;
box-shadow: 0 1px rgba(102, 102, 102, 0.6);
transform: translateY(4px);
}
h1 {
font-family: HelveticaNeue;
font-size: xx-large;
font-weight: 100;
color: #ffffff;
text-align: left;
padding-left: 3%;
padding-top: 10px;
margin-top: 0;
margin-bottom: 0px;
}
.text-danger {
font-family: HelveticaNeue;
font-size: large;
color: #171581;
}
.subheading {
font-family: HelveticaNeue;
font-size: x-large;
font-weight: 100;
color: #171581;
text-align: left;
padding-left: 3%;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.topBar {
background: #ffffff;
border: 0;
height: 2px;
margin-left: 3%;
margin-right: 3%;
margin-top: 0px;
margin-bottom: 15px;
}
a {
color: #D60053;
}
.blueBar {
background: #171581;
border: 0;
height: 2px;
margin-left: 3%;
margin-right: 3%;
margin-top: 0px;
margin-bottom: 15px;
}
.whiteBoxHalf {
float: left;
width: 55%;
background: rgba(255, 255, 255, 0.6);
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 15px;
padding: 15px;
}
.whiteBoxFull {
float: left;
width: 90%;
background: rgba(255, 255, 255, 0.6);
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 15px;
padding: 15px;
}
.form-group {
color: #171581;
font-size: large;
font-weight: bold;
text-align: left;
margin-left: 5%;
}
.checkbox {
font-size: small;
text-align: right;
margin-right: 5%;
color: #808080;
}
input[type="text"] {
width: 95%;
height: 40px;
margin-bottom: 20px;
margin-top: 10px;
margin-right: 5%;
border-radius: 2px;
border: solid 1px black;
font-size: large;
}
input[type="password"] {
width: 95%;
height: 40px;
margin-bottom: 20px;
margin-top: 10px;
margin-right: 5%;
border-radius: 2px;
border: solid 1px black;
font-size: large;
}
.sidebar {
float: right;
width: 29%;
margin-left: 0;
margin-right: 3%;
text-align: left;
color: #171581;
}
.sidebar h2 {
font-family: HelveticaNeue;
font-size: large;
margin-bottom: 0;
}
.sidebarHR {
background: #171581;
border: 0;
height: 1px;
margin-top: 0px;
}
/*Icon images courtesy of Graphicsfuel and are free for commercial use.
See https://www.iconfinder.com/iconsets/20-flat-icons for details*/
.sidebarHeader img {
margin-right: 10px;
}
.bottomBar {
clear: both;
background: #ffffff;
border: 0;
height: 2px;
margin-left: 3%;
margin-right: 3%;
margin-top: 0px;
margin-bottom: 15px;
}
And here's the html
@{
ViewBag.Title = "_Layout";
}
@RenderSection("scripts", required: false)
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-social.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<div class="wrapper">
<header class="header">
<a href="/" class="logo">
<img src="~/Images/logo.png" />
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#about"><span>About</span></a></li>
<li><a href="#residential"><span>Residential & Business</span></a></li>
<li><a href="#accountDetails"><span>My Account Details</span></a></li>
<li><a href="#faq"><span>FAQ</span></a></li>
<li><a href="#contact"><span>Contact</span></a></li>
</ul>
</header>
<!--End of code for responsive menu-->
<!--HEADER END-->
<div class="page-content">
<div class="cloud1">
<img src="~/Images/cloud1.png" />
</div>
<div class="cloud2">
<img src="~/Images/cloud2.png" />
</div>
<div class="cloud3">
<img src="~/Images/cloud3.png" />
</div>
<div class="cloud4">
<img src="~/Images/cloud4.png" />
</div>
<!--CONTENT START-->
<div class="box">
@RenderBody()
</div>
<!--CONTENT END-->
</div>
<!--FOOTER START-->
<div class="bottom">
<div class="padt120">
<img src="~/Images/buildings.png" alt="Buildings" class="buildings" />
<div class="grass"></div>
</div>
<footer class="padtb30">
<span class="copyright">
<small class="lightgrey-text">
© Copyright 2016. All Rights Reserved. ONEnergy Inc. <a href="http://privacypolicy">Privacy Policy</a>
</small>
</span>
</footer>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire