I'm having issues with anchor links on my page. When clicked my header element gets partially obscured. The bug relates to the use of:
#container {
overflow: hidden;
}
Which I need to stop an overflow bug (due to my use of CSS rotate, which I need for branding / style).
I've tried removing and replacing the above with popular alternatives like:
html, body {
overflow-x: hidden;
}
But this causes other issues.
Any and all suggestion appreciated. Full code enclosed. To simulate issue run the code, click full screen (on desktop) then click the 'about us' button.
function myFunction() {
var x = document.getElementById("primaryNav");
if (x.className === "bg-blue header-nav") {
x.className += " open";
} else {
x.className = "bg-blue header-nav";
}
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline
}
html{
line-height:1
}
ol,ul{
list-style:none
}
table{
border-collapse:collapse;
border-spacing:0
}
caption,th,td{
text-align:left;
font-weight:normal;
vertical-align:middle
}
q,blockquote{
quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
content:"";
content:none
}
a img{
border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
#font-face{
font-family:quicksandbold;
src:url(../fonts/quicksand-bold-webfont.eot);
src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
font-weight:400;
font-style:normal
}
#font-face{
font-family:quicksandregular;
src:url(../fonts/quicksand-regular-webfont.eot);
src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
font-weight:400;
font-style:normal
}
article li,h1,p,span{
font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
font-size:1.4em
}
h1{
font-size:8vw
}
h1 span.full{
font-size:11vw
}
.width-fix{
width:89%
}
.rotate p{
font-size:1em;
line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
line-height:1.4;
font-size:1.2em
}
h3,h4{
font-size:1.4em
}
small{
font-size:0.8em
}
ul{
text-align:left;
margin:0 auto;
max-width:800px;
padding-left:30px;
width:70%
}
ul li{
padding-bottom:5px
}
ul li::before{
content:"\2022";
color:#000;
display:inline-block;
width:1em;
margin-left:-1em
}
body{
background-color:#27AAE1
}
*{
box-sizing:border-box;
padding:0;
margin:0
}
.hide{
display:none
}
.full-height{
display:grid;
width:100vw;
height:calc(100vh - 92px)
}
.limit-width p,footer{
margin:0 auto;
max-width:90%
}
.limit-width-lrg p{
margin:0 auto;
width:65%;
max-width:870px
}
.white{
color:#fff
}
.bg-blue{
background-color:#27AAE1
}
.blue{
color:#27AAE1
}
.bold,.bold li,.bold p{
font-family:quicksandbold
}
.cntr{
text-align:center
}
.bg-white{
background-color:#fff
}
.rotate{
transform:rotate(-15deg)
}
.stop-rotate{
transform:rotate(15deg)
}
.txt-center{
display:grid;
align-items:center
}
.txt-base{
display:grid;
align-items:end
}
.force-base{
bottom:0;
position:absolute;
left:calc(50% - 200px)
}
.mrg-top{
margin-top:10%
}
body .mrg-top-sml{
margin-top:40px
}
.pad-top{
padding-top:20px
}
.pad-top-lrg{
padding-top:40px
}
.pad-top-xlrg{
padding-top:13.75vh
}
.pad-btm{
padding-bottom:20px
}
.pad-top-sml{
padding-top:5%
}
.section-pad{
padding:15% 0
}
.bg-2 .button{
color:#ECEFF1;
border-color:#ECEFF1
}
.button--winona{
overflow:hidden;
padding:0;
-webkit-transition:border-color 0.3s, background-color 0.3s;
transition:border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
padding:1em 0;
transition:transform 0.3s, opacity 0.3s;
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
background-color:#fff
}
.button--border-thick{
border:3px solid
}
.button--text-thick{
font-weight:600
}
.button--text-upper{
letter-spacing:2px;
text-transform:uppercase
}
.button--size-s{
font-size:14px
}
.button{
min-width:150px;
max-width:210px;
display:block;
margin:0 auto;
border:3px #27AAE1;
border-style:dashed;
background:rgba(39,170,225,0.12);
color:inherit;
position:relative;
z-index:1;
-webkit-backface-visibility:hidden;
-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;
cursor:pointer
}
button,input{
line-height:normal
}
button{
align-items:flex-start;
text-align:center
}
.button--winona>span{
display:block
}
.button>span{
vertical-align:middle
}
.button--winona::after,.button--winona>span{
padding:1em 0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
.button--winona::after{
content:attr(data-text);
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
color:#000;
-webkit-transform:translate3d(0, 25%, 0);
transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
opacity:0;
-webkit-transform:translate3d(0, -25%, 0);
transform:translate3d(0, -25%, 0)
}
a.btn-link{
color:inherit;
text-decoration:none
}
#primaryNav{
padding:0 20px;
position:relative;
text-align:center
}
#primaryNav a:first-of-type{
padding-top:20px
}
#primaryNav a{
display:none;
color:#fff;
padding-bottom:20px;
text-decoration:none
}
#primaryNav a#nav-burger{
display:block;
position:absolute;
right:20px;
top:-50px;
z-index:999
}
#primaryNav.open a{
display:block
}
#primaryNav #nav-burger{
width:25px;
height:23px;
position:relative;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
cursor:pointer
}
#primaryNav #nav-burger span{
display:block;
position:absolute;
height:3px;
width:100%;
background:#fff;
border-radius:9px;
opacity:1;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
top:0px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
top:7px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
top:14px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
width:0%;
opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
top:18px;
left:5px
}
#container{
overflow:hidden
}
#logo{
padding-top:20px;
text-align:center
}
#logo svg{
max-width:120px
}
.spill{
width:130%;
margin-left:-15%
}
.stripe-sml{
height:11vh
}
.stripe-sml p{
line-height:1.5;
padding-bottom:18px
}
.stripe-lrg{
height:18vh
}
#scroll-down{
max-width:30px
}
footer{
text-align:center
}
#media only screen and (min-width: 50px){
.foo2{
display:none
}
}
#media only screen and (min-width: 501px){
h1{
font-size:40px
}
}
#media only screen and (min-width: 801px){
.limit-width p{
margin:0 auto;
max-width:60%
}
.full-height{
height:calc(100vh - 154px)
}
.mrg-top{
margin-top:5%
}
h1{
font-size:6vw;
line-height:1.4
}
h1 .white.bold{
line-height:2;
font-size:0.73em
}
h1 .full{
margin-bottom:-2%
}
h3,h4{
font-size:2vw
}
ul{
width:100%;
padding-left:80px
}
.lrg-title{
font-size:3vw
}
#primaryNav a{
display:inline-block !important;
padding:20px 10px
}
#primaryNav a#nav-burger{
display:none !important
}
.height-override{
height:auto
}
.stripe-lrg h1 br{
display:none
}
#scroll-down{
bottom:20px;
position:absolute;
left:calc(50% - 30px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header class="bg-blue" id="top">
<div id="logo" class="float">
<a href="#">
<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
</a>
</div>
</header>
<nav id="primaryNav" class="bg-blue header-nav">
Services
About Us
Contact
<a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- Home Content -->
<article>
<section class="bg-blue full-height">
<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
</section>
<section class="cntr spill txt-center rotate stripe-lrg height-override">
<h1>
<div class="full">Lorem ipsum.</div>
<br>
<div class="white bold">Lorem ipsum. Digital Agency</div>
</h1>
</section>
<section class="rotate cntr bg-white txt-center stripe-lrg spill">
<p>Think web design, think Lorem ipsum.</p>
<a class="btn-link" href="#about-us">
<button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
</a>
<p>We Rethink, We Build, We Optimise</p>
</section>
<section class="cntr stripe-lrg">
<svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg>
</section>
</section>
<section class="section-pad limit-width">
<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
</section>
<section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
<span class="stop-rotate">
<h3 class="pad-btm">Work With Us</h3>
<p class="bold pad-btm">Lorem ipsum.</p>
<p class="pad-btm">Lorem ipsum.</p>
<p>Lorem ipsum</p>
<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<a class="btn-link" href="#">
<button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
</a>
</span>
</section>
</article>
<footer class="pad-top-xlrg">
<p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
<p class="white pad-btm"><small>© Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>
Fixes:
I just remove overflow form #containeras the issue is with this overflow, and add
overflow-x:hiddento body and also add scroll-behavior: smooth to
html and body for smooth scrolling.
function myFunction() {
var x = document.getElementById("primaryNav");
if (x.className === "bg-blue header-nav") {
x.className += " open";
} else {
x.className = "bg-blue header-nav";
}
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline
}
html{
line-height:1
}
ol,ul{
list-style:none
}
table{
border-collapse:collapse;
border-spacing:0
}
caption,th,td{
text-align:left;
font-weight:normal;
vertical-align:middle
}
q,blockquote{
quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
content:"";
content:none
}
a img{
border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
#font-face{
font-family:quicksandbold;
src:url(../fonts/quicksand-bold-webfont.eot);
src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
font-weight:400;
font-style:normal
}
#font-face{
font-family:quicksandregular;
src:url(../fonts/quicksand-regular-webfont.eot);
src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
font-weight:400;
font-style:normal
}
article li,h1,p,span{
font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
font-size:1.4em
}
h1{
font-size:8vw
}
h1 span.full{
font-size:11vw
}
.width-fix{
width:89%
}
.rotate p{
font-size:1em;
line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
line-height:1.4;
font-size:1.2em
}
h3,h4{
font-size:1.4em
}
small{
font-size:0.8em
}
ul{
text-align:left;
margin:0 auto;
max-width:800px;
padding-left:30px;
width:70%
}
ul li{
padding-bottom:5px
}
ul li::before{
content:"\2022";
color:#000;
display:inline-block;
width:1em;
margin-left:-1em
}
body{
background-color:#27AAE1
}
*{
box-sizing:border-box;
padding:0;
margin:0
}
.hide{
display:none
}
.full-height{
display:grid;
width:100vw;
height:calc(100vh - 92px)
}
.limit-width p,footer{
margin:0 auto;
max-width:90%
}
.limit-width-lrg p{
margin:0 auto;
width:65%;
max-width:870px
}
.white{
color:#fff
}
.bg-blue{
background-color:#27AAE1
}
.blue{
color:#27AAE1
}
.bold,.bold li,.bold p{
font-family:quicksandbold
}
.cntr{
text-align:center
}
.bg-white{
background-color:#fff
}
.rotate{
transform:rotate(-15deg)
}
.stop-rotate{
transform:rotate(15deg)
}
.txt-center{
display:grid;
align-items:center
}
.txt-base{
display:grid;
align-items:end
}
.force-base{
bottom:0;
position:absolute;
left:calc(50% - 200px)
}
.mrg-top{
margin-top:10%
}
body .mrg-top-sml{
margin-top:40px
}
.pad-top{
padding-top:20px
}
.pad-top-lrg{
padding-top:40px
}
.pad-top-xlrg{
padding-top:13.75vh
}
.pad-btm{
padding-bottom:20px
}
.pad-top-sml{
padding-top:5%
}
.section-pad{
padding:15% 0
}
.bg-2 .button{
color:#ECEFF1;
border-color:#ECEFF1
}
.button--winona{
overflow:hidden;
padding:0;
-webkit-transition:border-color 0.3s, background-color 0.3s;
transition:border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
padding:1em 0;
transition:transform 0.3s, opacity 0.3s;
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
background-color:#fff
}
.button--border-thick{
border:3px solid
}
.button--text-thick{
font-weight:600
}
.button--text-upper{
letter-spacing:2px;
text-transform:uppercase
}
.button--size-s{
font-size:14px
}
.button{
min-width:150px;
max-width:210px;
display:block;
margin:0 auto;
border:3px #27AAE1;
border-style:dashed;
background:rgba(39,170,225,0.12);
color:inherit;
position:relative;
z-index:1;
-webkit-backface-visibility:hidden;
-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;
cursor:pointer
}
button,input{
line-height:normal
}
button{
align-items:flex-start;
text-align:center
}
.button--winona>span{
display:block
}
.button>span{
vertical-align:middle
}
.button--winona::after,.button--winona>span{
padding:1em 0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
.button--winona::after{
content:attr(data-text);
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
color:#000;
-webkit-transform:translate3d(0, 25%, 0);
transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
opacity:0;
-webkit-transform:translate3d(0, -25%, 0);
transform:translate3d(0, -25%, 0)
}
a.btn-link{
color:inherit;
text-decoration:none
}
#primaryNav{
padding:0 20px;
position:relative;
text-align:center
}
#primaryNav a:first-of-type{
padding-top:20px
}
#primaryNav a{
display:none;
color:#fff;
padding-bottom:20px;
text-decoration:none
}
#primaryNav a#nav-burger{
display:block;
position:absolute;
right:20px;
top:-50px;
z-index:999
}
#primaryNav.open a{
display:block
}
#primaryNav #nav-burger{
width:25px;
height:23px;
position:relative;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
cursor:pointer
}
#primaryNav #nav-burger span{
display:block;
position:absolute;
height:3px;
width:100%;
background:#fff;
border-radius:9px;
opacity:1;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
top:0px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
top:7px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
top:14px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
width:0%;
opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
top:18px;
left:5px
}
#logo{
padding-top:20px;
text-align:center
}
#logo svg{
max-width:120px
}
.spill{
width:130%;
margin-left:-15%
}
.stripe-sml{
height:11vh
}
.stripe-sml p{
line-height:1.5;
padding-bottom:18px
}
.stripe-lrg{
height:18vh
}
#scroll-down{
max-width:30px
}
footer{
text-align:center
}
#media only screen and (min-width: 50px){
.foo2{
display:none
}
}
#media only screen and (min-width: 501px){
h1{
font-size:40px
}
}
#media only screen and (min-width: 801px){
.limit-width p{
margin:0 auto;
max-width:60%
}
.full-height{
height:calc(100vh - 154px)
}
.mrg-top{
margin-top:5%
}
h1{
font-size:6vw;
line-height:1.4
}
h1 .white.bold{
line-height:2;
font-size:0.73em
}
h1 .full{
margin-bottom:-2%
}
h3,h4{
font-size:2vw
}
ul{
width:100%;
padding-left:80px
}
.lrg-title{
font-size:3vw
}
#primaryNav a{
display:inline-block !important;
padding:20px 10px
}
#primaryNav a#nav-burger{
display:none !important
}
.height-override{
height:auto
}
.stripe-lrg h1 br{
display:none
}
#scroll-down{
bottom:20px;
position:absolute;
left:calc(50% - 30px)
}
}
html,body{
scroll-behavior: smooth;
}
body{
overflow-x: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header class="bg-blue" id="top">
<div id="logo" class="float">
<a href="#">
<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
</a>
</div>
</header>
<nav id="primaryNav" class="bg-blue header-nav">
Services
About Us
Contact
<a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- Home Content -->
<article>
<section class="bg-blue full-height">
<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
</section>
<section class="cntr spill txt-center rotate stripe-lrg height-override">
<h1>
<div class="full">Lorem ipsum.</div>
<br>
<div class="white bold">Lorem ipsum. Digital Agency</div>
</h1>
</section>
<section class="rotate cntr bg-white txt-center stripe-lrg spill">
<p>Think web design, think Lorem ipsum.</p>
<a class="btn-link" href="#about-us">
<button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
</a>
<p>We Rethink, We Build, We Optimise</p>
</section>
<section class="cntr stripe-lrg">
<svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg>
</section>
</section>
<section class="section-pad limit-width">
<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
</section>
<section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
<span class="stop-rotate">
<h3 class="pad-btm">Work With Us</h3>
<p class="bold pad-btm">Lorem ipsum.</p>
<p class="pad-btm">Lorem ipsum.</p>
<p>Lorem ipsum</p>
<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<a class="btn-link" href="#">
<button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
</a>
</span>
</section>
</article>
<footer class="pad-top-xlrg">
<p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
<p class="white pad-btm"><small>© Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>
Related
following a very good although basic tutorial, my content (the text between the header and the footer) won't center.
Ive tried to follow many tutorials for responsive image boxes (i.e. 3 in a row, and when resized to mobile it should be 1 by 1 as you scroll down) and I have failed miserably. Everything was going well up until now, and I have the feeling something bigger is affecting my whole page, Im sure this is simple for a lot of people, but I am dumbstruck.
Thanks in advance to anyone that can help, this is killing me.
This is my HTML (I am using a Dreamweaver template for the entire site, but this is not the template file, just an HTML created from the template).
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Holiday Rentals</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- Navigation Bar -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">MALLORCA<span>NOW</span></label>
<ul>
<li><a class="active"href="#">Home</a></li>
<li>Holiday Rentals</li>
<li>For Sale</li>
</ul>
</nav>
<!-- End Navigation Bar -->
<!-- Main Content -->
<!-- InstanceBeginEditable name="main-content" -->
<div class="main-content">
<div class="box-area">
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Azalea</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Canguila</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
<div class="single-box">
<div class="img-area"></div>
<div class="img-text">
<span class="header-text">Iris</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque ut quam ac iaculis. Mauris.</p>
</div>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="footer-main-content">
<div class="left box">
<h2>About Us</h2>
<div class="footer-content">
<p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
<div class="social">
<span class="fab fa-facebook-f"></span>
<span class="fab fa-twitter"></span>
<span class="fab fa-instagram"></span>
<span class="fab fa-youtube"></span>
</div>
</div>
</div>
<div class="center box">
<h2>Address</h2>
<div class="footer-content">
<div class="place">
<span class="fas fa-map-marker-alt"></span>
<span class="text">Cala Bona, Mallorca</span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+34-676841886</span>
</div>
<div class="email">
<span class="fas fa-envelope"></span>
<span class="text">office#mallorca-now.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact Us</h2>
<div class="footer-content">
<form action="#">
<div class="email">
<div class="text">Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message *</div>
<textarea rows="2" cols="25" required></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">Est. 2012 - Mallorca-Now</span>
<span class="far fa-copyright"></span><span> - All Rights Reserved</span>
</center>
</div>
</footer>
<!-- End Footer -->
</body>
<!-- InstanceEnd --></html>
And my CSS, the last style is the intended "center", but as I have said, I have been having other problems with adding content to the middle section of my site.
/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
/* Navbar */
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
top:0;
}
label.logo{
color:white;
font-size:35px;
font-weight:100;
line-height:80px;
padding:0 100px;
}
label.logo span{
font-weight:900;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin:0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
}
nav ul li a.active,nav ul li a:hover{
background:#6DD5FA;
transition:0.9s;
border-radius:4px;
}
.checkbtn{
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}
#check{
display:none;
}
#media (max-width: 952px){
label.logo{
font-size:30px;
padding-left:50px;
}
nav ul li a{
font-size:16px;
}
}
#media (max-width:858px){
.checkbtn{
display:block;
}
ul{
position:fixed;
width:100%;
height:100vh;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
top:80px;
left:-100%;
text-align:center;
transition:all .9s;
}
nav ul li{
display:block;
margin:50px;
line-height:30px;
}
nav ul li a{
font-size:20px;
}
a:hover,a.active{
background:none;
color:#0082e6;
}
#check:checked ~ ul{
left:0;
}
}
/* Main Content */
.main-content{
min-height:;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
}
.cards{
max-width:1300px;
margin:0 auto;
text-align:center;
padding:30px;
}
.services{
display:flex;
align-items:center;
}
.cardscontent{
display:flex;
flex-wrap:wrap;
flex:1;
margin:20px;
padding:20px;
border:2px solid black;
border-radius:4px;
transition: all 0.9s ease;
}
.cardscontent .fab{
font-size:70px;
margin:16px 0;
}
.cardscontent .fas{
font-size:70px;
margin:16px 0;
}
.cardscontent > *{
flex: 1 1 100%;
}
.cardscontent:hover{
color:white;
}
.cardscontent:hover a{
border-color:white;
background:white;
color:black;
}
.c-content1:hover{
border-color:#BCED91;
background:#BCED91;
}
.c-content2:hover{
border-color:#FFC30B;
background:#FFC30B;
}
.c-content3:hover{
border-color:#D70040;
background:#D70040;
}
.cardscontent h2{
font-size:30px;
margin:16px 0;
letter-spacing:1px;
}
.cardscontent p{
font-size:17px;
}
.cardscontent a{
margin:22px;
background:black;
color:white;
text-decoration:none;
border:1px solid black;
padding:15px 0;
border-radius:25px;
transition:.9s ease;
}
.cardscontent a:hover{
border-radius:4px;
}
#media (max-width:900px){
.services{
display:flex;
flex-direction:column;
}
}
/* Footer */
footer{
position:relative;
bottom:0;
width:100%;
background-color:#101010;
color:white;
}
.footer-main-content{
display:flex;
}
.footer-main-content .box{
flex-basis:50%;
padding:10px 20px;
}
.box h2{
font-size:1.125rem;
font-weight:600;
text-transform:uppercase;
}
.box .footer-content{
margin:20px 0 0 0;
position:relative;
}
.box .footer-content:before{
position:absolute;
content:'';
top:-10px;
height:2px;
width:100%;
background:#1a1a1a;
}
.box .footer-content:after{
position:absolute;
content:'';
height:2px;
width:15%;
background:#6DD5FA;
top:-10px;
}
.left .footer-content{
text-align:justify;
}
.left .footer-content .social{
margin:20px 0 0 0;
}
.left .footer-content .social a{
padding: 0 2px;
}
.left .footer-content .social a span{
height:40px;
width:40px;
background:#1a1a1a;
line-height:40px;
text-align:center;
font-size:18px;
border-radius:5px;
color:white;
}
.left .footer-content .social a span:hover{
background:#6DD5FA;
transition:0.9s;
}
.center .footer-content .fas{
font-size:1.4375rem;
background:#1a1a1a;
height:45px;
width:45px;
line-height:45px;
text-align:center;
border-radius:50%;
transition:0.9s;
cursor:pointer;
}
.center .footer-content .fas:hover{
background:#6DD5FA;
}
.center .footer-content .text{
font-size:1.0625rem;
font-weight:500;
padding-left:10px;
}
.center .footer-content .phone{
margin:10px 0;
}
.right form .text{
font-size:1.0625rem;
margin-bottom:2px;
color:#656565;
}
.right form .msg{
margin-top:10px;
}
.right form input, .right form textarea{
width:100%;
font-size:1.0625rem;
background:#151515;
padding-left:10px;
border:1px solid #222222;
color:white;
}
.right form input:focus,
.right form textarea:focus{
outline-color:#3498db;
}
.right form input{
height:32px;
}
.right form .btn{
margin-top:10px;
}
.right form .btn button{
height:40px;
width:100%;
border:none;
outline:none;
background: #6DD5FA;
font-size:1.0625rem;
font-weight:500;
cursor:pointer;
transition:0.3s;
color:white;
}
.right form .btn button:hover{
background:#000;
}
.bottom center{
padding:5px;
font-size:0.9375rem;
background:#151515;
}
.bottom center span{
color:#656565;
}
.bottom center span a{
color:white;
}
#media screen and (max-width:900px){
footer{
position:relative;
bottom:0px;
}
.footer-main-content{
flex-wrap:wrap;
flex-direction:column;
}
.footer-main-content .box{
margin:5px 0;
}
}
.box-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
} ```
The .box-area should center the content, as I have tried it out in a blank HTML page and it does. I am truly lost. Thanks to anyone that can help, and If I havent provided enough information I am sorry, tell me what you need and I will.
Mark Monaghan
Basically, the reason this is happening is that you are positioning the elements of the navigation bar with float. One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). To solve the problem, set the overflow property to hidden in nav.
Exemple:
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
top:0;
overflow:hidden;
}
You can get more information on how to work with this property through the following link: All About Floats | CSS Tricks
Seems like you need to add a width of 100% to the .box-area to get it to center.
.box-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
/*Added width to the area and it centered*/
width: 100%;
}
Here is a codepen I used to play with it:
https://codepen.io/josiemedel/pen/XWpMbpw
Actually, I'm new to HTML and CSS.For practicing, I used a psd & tried to implement, but my media queries are not working. I have tried setting all the container's width to 100% but when I do responsive mode in the browser, a white space comes on the right side. Again, it's breaking when I try to reduce the screen size.Can someone please guide me on this.It would be of immense help.
html,body,ul,li,p{
margin:0px;
padding:0px;
}
.content{
width: 1250px;
margin: 0px auto;
}
.body-container{
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/4hBal14.png);
background-size: cover;
}
#logo {
height: 100px;
vertical-align: middle;
margin-right:250px;
}
.nav-container ul{
list-style-type: none;
background:transparent;
}
.nav-container li{
float: left;
color:white;
font-family: 'Gentium Book Basic', serif;
}
.nav-container ul li:not(:first-child):hover {
text-align:center;
}
.nav-container >ul >li:not(:first-child) {
padding-top:54px;
margin-right:53px;
}
.social-media{
margin-left:-18px;
}
.social-media li{
margin-right:18px;
}
.fa {
text-decoration: none;
}
.fa-facebook {
color:#dab33e;
}
.fa-twitter {
color:#dab33e;
}
.fa-youtube {
color:#dab33e;
}
.nav-container p{
clear:both;
font-family: 'Yeseva One', cursive;
text-align:center;
font-size:48px;
color:white;
padding-top:130px;
margin-bottom:30px;
}
.border{
text-align:center;
}
.border img{
width:230px;
height:50px;
margin-bottom:42px;
}
.button-group{
text-align: center;
padding-bottom:142px;
}
.nav-container .button-1 {
margin-left: 30px;
width:229px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #010101;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background: #201913; /* fallback color for old browsers */
background: rgba(32, 25, 19, 0.5);
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.nav-container .button-2 {
margin-left: 30px;
width:229px;
display: inline-block;
padding: 10px 14px;
color: #fff;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background: #fff; /* fallback color for old browsers */background: rgba(255, 255, 255, 0.5);
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.chef-container{
width:100%;
margin:0px auto;
float:left;
background:url(https://i.imgur.com/ZekPxCX.png) 0 0 repeat;
}
.chef-words{
margin-top:100px;
width:50%;
float:left;
}
.chef-words p{
font-family:'Yeseva One', cursive;
text-align:center;
font-size: 42px;
color:#cc9900;
}
.border-2{
text-align:center;
}
.chef-words .chef-words-2{
font-family: 'Lato', sans-serif;
font-size:14px;
color: #000000;
text-align:center;
margin-top:42px;
}
.chef{
text-align:center;
margin-top:58px;
}
.chef-container .chef-plate{
width: 50%;
float:right;
margin-top:76px;
margin-bottom:82px;
}
.ingredient-container{
clear:both;
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/jrvxhTU.png);
background-size: cover;
padding-top:100px;
padding-bottom:100px;
}
.overlay{
width:570px;
background-color: #221c17;
opacity:0.7;
padding:50px;
margin-left:600px;
}
.overlay h2{
font-family:'Yeseva One', cursive;
color:white;
text-align: center;
}
.overlay p{
font-family: 'Lato', sans-serif;
font-size:14px;
text-align:center;
color:white;
}
.ingredient-images{
text-align: center;
}
.ingredient-images img{
margin-right:30px;
margin-top:72px;
}
.border-5{
text-align:center;
}
.menu{
clear:both;
float:left;
width:100%;
background:url(https://i.imgur.com/LUnK8M7.png) 0 0 repeat;
}
.appetizer{
float:left;
}
.appetizer h1{
margin-left:227px;
font-size:35px;
font-family:'Yeseva One', cursive;
color:#cc9900;
}
.appetizer .border-4 img{
margin-left:210px;
width:230px;
height:28px;
margin-bottom:40px;
}
.appetizer p{
font-family: 'Lato', sans-serif;
}
.appetizer h4{
font-family:'Yeseva One', cursive;
font-size:20px;
margin:0px;
color:#c89f2d;
border-bottom:1px solid;
border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
border-image-slice: 1;
}
.menu-1{
float:left;
margin-left:110px;
margin-bottom:41px;
}
.menu-1 h4{
padding-bottom:13px;
}
.menu-1 p{
padding-top:14px;
}
.menu-1 .items{
margin-right:293px;
}
.menu-2{
clear:both;
float:left;
margin-left:110px;
margin-bottom:41px;
}
.menu-2 .items{
margin-right:206px;
}
.menu-2 h4{
padding-bottom:13px;
}
.menu-2 p{
padding-top:14px;
}
.menu-3{
clear:both;
float:left;
margin-left:110px;
margin-bottom:71px;
}
.menu-3 .items{
margin-right:206px;
}
.menu-3 h4{
padding-bottom:13px;
}
.menu-3 p{
padding-top:14px;
}
.appetizer .salads{
margin-left:266px;
}
.menu-4{
clear:both;
float:left;
margin-left:110px;
margin-bottom:30px;
}
.menu-4 .items{
margin-right:222px;
}
.menu-4 h4{
padding-bottom:13px;
}
.menu-4 p{
padding-top:14px;
}
.special{
position:relative;
clear:both;
float:left;
margin-left:95px;
border:1px solid #e3d4a3;
margin-bottom:28px;
}
.special .special-price{
position:absolute;
top:-20px;
right:-1px;
background-image: url(./special.png);
color:white;
padding-left: 13px;
padding-right: 13px;
text-align:center;
border:none;
}
.special .menu-5 .items{
margin-right:250px;
}
.special .menu-5 h4{
border-bottom: 1px solid;
margin-left: 10px;
margin-right: 14px;
padding-bottom:13px;
}
.special .menu-5 p{
margin-left:10px;
padding-top:13px;
}
.menu-6{
clear:both;
float:left;
margin-left:110px;
margin-bottom:100px;
}
.menu-6 .items{
margin-right:245px;
}
.menu-6 h4{
padding-bottom:13px;
}
.menu-6 p{
padding-top:14px;
}
.starters{
float:left;
}
.starters h1{
margin-left:310px;
font-size:35px;
font-family:'Yeseva One', cursive;
color:#cc9900;
}
.starters .border-4 img{
margin-left:261px;
width:230px;
height:28px;
margin-bottom:40px;
}
.starters .main{
margin-left:270px;
}
.starters .border-10 img{
margin-left:261px;
width:230px;
height:28px;
margin-bottom:40px;
}
.starters p{
font-family: 'Lato', sans-serif;
}
.starters h4{
font-family:'Yeseva One', cursive;
font-size:20px;
margin:0px;
border-bottom:1px solid;
color: #c89f2d;
border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
border-image-slice: 1;
}
.menu-7{
float:left;
margin-left:170px;
margin-bottom:40px;
}
.menu-7 .items{
margin-right:287px;
}
.menu-7 h4{
padding-bottom:13px;
}
.menu-7 p{
padding-top:14px;
}
.menu-8{
clear:both;
float:left;
margin-left:170px;
margin-bottom:73px;
}
.menu-8 .items{
margin-right:252px;
}
.menu-8 h4{
padding-bottom:13px;
}
.menu-8 p{
padding-top:14px;
}
.menu-9{
clear:both;
float:left;
margin-left:170px;
margin-bottom:30px;
}
.menu-9 .items{
margin-right:186px;
}
.menu-9 h4{
padding-bottom:13px;
}
.menu-9 p{
padding-top:14px;
}
.special-price{
position:relative;
margin-left:154px;
clear:both;
float:left;
border:1px solid #e3d4a3;;
margin-bottom:30px;
}
.special-price h4{
margin-left: 14px;
margin-right: 10px;
padding-bottom:13px;
}
.special-price .special-item{
border:1px solid;
position:absolute;
top:-20px;
right:0px;
background-image: url(./special.png);
color: white;
padding-left: 13px;
padding-right: 13px;
text-align: center;
border: none;
}
.special-price .menu-10 .items{
margin-right:252px;
}
.special-price .menu-10 p{
margin-left:15px;
padding-top:13px;
}
.menu-11{
margin-left:170px;
clear:both;
float:left;
margin-bottom:44px;
}
.menu-11 .items{
margin-right:235px;
}
.menu-11 h4{
padding-bottom:13px;
}
.menu-11 p{
padding-top:14px;
}
.menu-12{
margin-left:170px;
clear:both;
float:left;
}
.menu-12 .items{
margin-right:286px;
}
.menu-12 h4{
padding-bottom:13px;
}
.menu-12 p{
padding-top:14px;
}
.review{
clear:both;
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/d1vYNzu.png);
background-size: cover;
padding-top:100px;
padding-bottom:100px;
}
.guest-reviews{
margin-left:240px;
text-align:center;
width:770px;
background-color: #010101;
color:white;
opacity:0.7;
padding:50px;
}
.guest-reviews h2{
font-family:'Yeseva One', cursive;
}
.content >.guest-reviews> p {
font-family:'Gentium Book Basic', bold;
font-size:19px;
color:white;
}
.guest-reviews .food{
margin-top:45px;
}
.contact{
width:100%;
float:left;
margin:0px auto;
background:url(https://i.imgur.com/3mZ8Axw.png) 0 0 repeat;
padding-top:100px;
padding-bottom:100px;
}
.food-items{
float:left;
width:50%;
}
.food-items .food-item-1{
margin-right:30px;
}
.just-container{
float:left;
width:50%;
}
.just-container h1{
text-align: center;
font-family: 'Yeseva One', cursive;
color:#cc9900;
margin-top:-10px;
}
.just-container p{
margin-left: 115px;
font-family: 'Lato', sans-serif;
color:#000000;
}
.above-form-text{
margin-top:28px;
margin-bottom:46px;
margin-left: 115px;
}
form{
margin-left:100px;
}
label {
display:block;
font-size:19px;
}
input{
display:block;
width:200px;
height:34px;
}
input:focus {
outline: none !important;
border:1px solid #c89f2d;
}
select{
display: block;
width:200px;
height:37px;
-webkit-appearance: none;
-moz-appearance: none;
background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #FFF;
background-position-x: 178px;
background-size: 9px;
}
.submit-button {
background-color:#c9a131;
border: none;
color: white;
width:200px;
padding: 13px 61px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
}
.footer-container{
clear:both;
float:left;
margin:0px auto;
width:100%;
margin:0px auto;
background:black;
}
.column {
clear:right;
background: black;
text-align:center;
float: left;
width: 33.33%;
padding-bottom:40px;
}
.column h2 {
color:white;
}
.column p {
color:white;
}
.cards{
margin-top:53px;
}
.social{
margin-top:53px;
}
/* Large devices (laptops/desktops, 992px and up) */
#media (max-width: 992px) {
.nav-container{
width:80%
}
.chef-words{
width:80%;
}
.chef-plate{
width:100%;
margin-right:500px;
}
.ingredient-container{
width:100%;
}
.overlay{
width:20%;
margin:0px auto;
}
.menu{
width:100%;
}
.menu-1{
width:100%;
}
.menu-2{
width:100%;
}
.menu-3{
width:100%;
}
.menu-4{
width:100%;
}
.menu-5{
width:100%;
}
.menu-6{
width:100%;
}
.menu-7{
width:100%;
}
.menu-8{
width:100%;
}
.menu-9{
width:100%;
}
.menu-10{
width:100%;
}
.menu-11{
width:100%;
}
.menu-12{
width:100%;
}
.appetizer{
width:40%;
}
.review{
width:100%;
}
.guest-reviews{
width:40%;
}
.contact{
width:100%;
}
.food-item-1{
width:50%;
}
.food-item-2{
width:50%;
}
.just-container{
width:80%;
}
.footer-container{
width:100%;
}
.column{
width:100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Home</title>
</head>
<body>
<div class="body-container">
<div class="content">
<div class="nav-container">
<ul>
<li><img id="logo" src="https://i.imgur.com/jpWGTQO.png" alt="Skype Logo" width="158px" height="110px"></li>
<li>Home</li>
<li>About</li>
<li>Ingredients</li>
<li>Menu</li>
<li>Revews</li>
<li>Reservations</li>
<li>
<ul class="social-media">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
<p>the right ingredients <br>for the right food</p>
<div class="border"><img src="https://i.imgur.com/Gc18m31.png"></div>
<div class="button-group">
<button class="button-1">Book a table</button>
<button class="button-2">See the Menu</button>
</div>
</div>
</div>
</div>
<div class="chef-container">
<div class="content">
<div class="chef-words">
<p>just the right food</p>
<div class="border-2"><img src="https://i.imgur.com/1PYWBDw.png"></div>
<p class="chef-words-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
Nullam consectetur efficitur odio in ultrices.</p>
<div class="chef"><img src="https://i.imgur.com/V33QPy3.png"></div>
</div>
<div class="chef-plate">
<img src="https://i.imgur.com/NCilq7W.png" width="584px" height="546px">
</div>
</div>
</div>
<div class="ingredient-container">
<div class="content">
<div class="overlay">
<h2>Fine Ingredients</h2>
<div class="border-5"><img src="border-5.png"></div>
<p>If you’ve been to one of our restaurants, you’ve seen – and tasted</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
Nullam consectetur efficitur odio in ultrices.</p>
<div class="ingredient-images">
<img src="pulses.png" width="100px" height="108px">
<img src="rice.png" width="100px" height="108px">
<img src="bread.png" width="100px" height="108px">
</div>
</div>
</div>
</div>
<div class="menu">
<div class="content">
<div class="appetizer">
<h1>Appetizers</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-1">
<h4><span class="items">Taztsiki</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-2">
<h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-3">
<h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<h1 class="salads">Salads</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-4">
<h4><span class="items">Ollive Specials</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="special">
<p class="special-price">Special</p>
<div class="menu-5">
<h4><span class="items">Greek Salad</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="menu-6">
<h4><span class="items">Gusto Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="starters">
<h1>Starters</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-7">
<h4><span class="items">Haloumi</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-8">
<h4><span class="items">Spinach Pie</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<h1 class="main">Main Dishes</h1>
<div class="border-10"><img src="border-4.png"></div>
<div class="menu-9">
<h4><span class="items">Cornish Mackerel</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="special-price">
<p class="special-item">Special</p>
<div class="menu-10">
<h4><span class="items">Roast Lamb</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="menu-11">
<h4><span class="items">Fried Chicken</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-12">
<h4><span class="items">Pastitsio</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
</div>
</div>
<div class="review">
<div class="content">
<div class="guest-reviews">
<h2>Guest Reviews</h2>
<div class="border-5"><img src="border-5.png"></div>
<p> <span><img src="inverted.png"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Aenean consectetur ex fermentum tortor varius elementum. Donec gravida libero nec auctor blandit. <br>
Fusce pretium porttitor ante, quis egestas justo aliquet vitae.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="food">-food inc, New York</p>
</div>
</div>
</div>
<div class="contact">
<div class="content">
<div class="food-items">
<img class="food-item-1" src="food-item-1.png" width="270px" height="508px">
<img src="food-item-2.png" width="270px" height="508px">
</div>
<div class="just-container">
<h1>just the right food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Sed pharetra, magna a porttitor dapibus, nisi augue luctu<br>
Nunc viverra, elit sit amet sagittis lobortis, leo orci</p>
<p class="above-form-text"> </p>
<div class="form">
<form>
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name" placeholder="your name *">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email" placeholder="your email *" >
</div>
<br style="clear:both;" />
</section>
<section>
<div style="float:left;margin-right:20px; margin-top:50px;">
<label for="name">Date</label>
<input id="date" type="date" value="" name="date" placeholder="date *">
</div>
<div style="float:left;margin-top:50px;">
<label for="email">Party Number</label>
<select id="party" >
</select>
</div>
<button class="submit-button" style="clear:both;float:left;margin-left:142px; margin-top:33px;">Book Now!</button>
</section>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have gone through your code found out where the issues is. It is with
.content{
width: 1250px;
margin: 0px auto;
}
Here you are specifying fixed width to the container therefore when you reduce the screen width it still has the same width.
You can either use max-width or have a media query for it.
Another reason for horizontal scroll is the margin-left for the .menu-* classes. Since the window width is small margin left is pushing the content outside the canvas therefore causing the scroll.
Hope this helps.
-Help :)
On different view port pls change the width of your .content div as per your requirement,
I can give you some breakpoints like
NOTE:- this is just an example for your idea. use as per your real need and design
#media (max-width: 992px) {
.content {width: 960px;}
}
#media (max-width: 768px) {
.content {width: 740px;}
}
#media (max-width: 481px) {
.content {width: 100%;}
}
I am designing a website, and for the navigation, it has a transition it goes through, when its hovered over. On hover, it just expands, all of its been done with CSS. I was wondering if there was a way to have the transition effect still occur when you go to a new page, so when you use the navigation and go to a different page on the website, it would be expanded at the start, then transition back to its off hover state.
Heres the HTML
`
Photos And Videos
<nav>
<div id="logo">
<img src="Images/Logo.png" >
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons -->
<span class="nav-text">
HOME
</span>
</a>
</li>
<li>
<a href="standards_&_info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
STANDARDS & INFORMATION
</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">
INTERESTING INFORMATION
</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">
JOBS
</span>
</a>
</li>
<li>
<a href="photo_&_video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">
PHOTOS & VIDEOS
</span>
</a>
</li>
</ul>
</nav>
<div class="content">
<div class="center">
<h3>Photos</h3>
</div>
<div class="row">
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
</div>
<hr>
<div class="center">
<h3>Videos</h3>
</div>
<div class="row">
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
</div>
</div>
<footer>
rueregrewghe
</footer>`
Here's the CSS
html, body{
height:100%;
width:100%;
background: rgb(110, 110, 110);
padding:0;
margin:0;
min-width:1280px;
}
.fa-2x{
font-size:2em;
}
.container{
width: 100%;
height: 100%;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
header{
position:fixed;
margin-left:60px;
width:calc(100% - 60px);
min-width:1400px;
height:108px;
background:rgb(57, 57, 57);
z-index:90;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
background:rgb(57, 57, 57);
min-width:1079px;
}
nav {
background:rgb(255, 90, 9);
position:fixed;
top:0;
height:calc(100% - 50px);
min-height:600px;
left:0;
width:60px;
overflow:hidden;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
float:left;
z-index:100;
}
nav:hover{
width:200px;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);;
}
nav li {
position:relative;
display:block;
width:250px;
}
nav li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#efefef;
font-size: 14px;
text-decoration:none;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
-ms-transition:all .1s linear;
transition:all .1s linear;
margin-top: calc(100% / 4);
}
nav .nav-icon {
position:relative;
display: table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.nav-text {
position:relative;
display: table-cell;
vertical-align:middle;
width:190px;
font-family: 'Droid Serif', serif;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.content{
float:right;
margin-top:108px;
top:0;
height:calc(100% - 178px);
position:relative;
width:89%;
min-width:1140px;
margin-left:200px;
padding-top:10px;
}
#one-box{
float:left;
width:50%;
height:100%;
min-width:700px;
margin-left: 20%;
background-color:rgb(179, 107, 0);
height:100%;
min-height:600px
}
.two-box{
float:left;
width:calc(( 80% / 2 ) - 10% );
height:100%;
min-width:395px;
margin-left: 10.5%;
}
.three-box{
float:left;
width:calc(( 85% / 3 ) - 6% );
height:100%;
min-width:240px;
margin-left: 6%;
}
.title{
background-color:rgb(179, 107, 0);
height:70px;
margin-bottom:8%;
margin-top:6%;
width:100%:
}
.center{
margin-left:42%;
width:260px;
height:50px;
background-color:rgb(179, 107, 0);
margin-bottom:15px;
}
.centered{
margin-left:43%;
width:260px;
height:70px;
background-color:rgb(179, 107, 0);
}
.row{
display: inline-block;
height:260px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
}
.s_row{
display: inline-block;
height:100px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
margin-top:20px;
}
.b_row{
display: inline-block;
height:300px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
margin-bottom:10px;
}
.media{
width:300px;
height:200px;
border:0px;
}
.wrap{
width:300px;
height:200px;
float:left;
margin-right: calc((100% - 1200px ) / 4);
}
.discription{
width:300px;
height:30px;
margin-top:20px;
background-color:rgb(179, 107, 0)
}
.info{
background-color:rgb(179, 107, 0);
height:75%;
padding-top:10px;
width:92%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
}
.infos{
background-color:rgb(179, 107, 0);
height:75%;
padding-top:10px;
width:92%;
padding-left:4%;
padding-right:4%;
min-height:530px;
overflow:hidden;
text-overflow:ellipsis;
}
#experiment{
background-color:rgb(179, 107, 0);
height:100%;
width:65%;
}
hr{
margin-top:40px;
margin-bottom:40px;
opacity: 0.0001;
}
.small_box{
width:300px;
height:100px;
background-color:rgb(179, 107, 0);
float:left;
margin-right: calc((100% - 1200px ) / 4);
}
.box{
width:300px;
height:250px;
background-color:rgb(179, 107, 0);
float:left;
margin-right: calc((100% - 1200px ) / 4);
border-radius:0px 0px 30px 30px;
}
.standard{
width:100%;
min-width:100%;
margin-bottom:100px;
border-spacing:0px;
padding:10px;
}
.standard th {
border-bottom:solid #000000;
padding:20px;
background:rgb(179, 107, 0);
height:100px;
}
.standard td {
border-bottom:dashed #000000;
padding: 0px 10px;
height:170px;
min-height:170px;
width:calc(100% / 3);
min-width:500px;
}
.mid {
border:1px;
border-right:solid #000000;
border-left:solid #000000;
}
.involves{
height:135px;
background-color:rgb(179, 107, 0);
width:100%;
margin-top:0%;
}
.small{
height:30px;
background-color:rgb(179, 107, 0);
width:100%;
margin-top:0%;
margin-bottom:14.5px;
}
.small_ind{
margin-top:0%;
height:30px;
margin-bottom:105px ;
background-color:rgb(179, 107, 0);
width:100%;
}
p{
text-align:center;
font-family: 'Times New Roman', serif;
color:white;
font-size:18px;
}
.read_more{
text-align:center;
font-family: 'Times New Roman', serif;
color:#FF6666;
font-size:18px;
opacity:0.8;
}
h1{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:50px;
color:white;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:white;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:white;
}
h3{
text-align:center;
font-family: 'Times New Roman', serif;
color:white;
font-size:30px;
}
Here's the JSFiddle http://jsfiddle.net/1ztL2kq4/
Sorry, I am unsure of how to add an additional page to the JSFiddle, if that is even possible. All help is appreciated!
If you like jQuery you can try with this
$( document ).ready(function() {
var timeout;
$(someel).hover(
function() {
timeout = setTimeout(function(){
// do stuff on hover
}, 2000);
},
function(){
clearTimeout(timeout);
// do stuff when hover off
}
);
});
But you just need to add check if its not home page. Hope this will help you :)
I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML!
help would be appreciated
HTML
<div id="con">
<div id="box1">
<p id="text1">
DESTINATIONS
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
THINGS TO DO
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
This can be done with :before or :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
http://jsfiddle.net/4bo4zju7/3/
CS3 is great! You no longer need JS for simple rollover effects. Gopalraju's above code should work and so does my example below. You can have a fiddle with it and use the code as you see fit.
The parent div, has a black page background, and the imgdiv changes everything inside it to a opacity by 50% on the mouse rolling over the div. In this case the image is inside the div.
There are a few ways of doing this. This is just another one to ad into the mix. Good luck.
.parentdiv {
background-color:#000;
height:100%;
width:100%;
}
.imgdiv {
padding:30px;
}
.imgdiv a{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}
.imgdiv a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.5s linear;
}
<div class="parentdiv">
<div class="imgdiv">
<a href="http://www.domain.com.au/link.html">
<img src="http://placehold.it/350x150" alt="image" height="150" width="350">
</a>
</div>
</div>
My website is composed of a fixed sidebar and a wrap which contains a gallery. The gallery is successfully centered within the wrap, but my problem is that the text-align:center property is also applied to the pictures
I haven't enough reputation points to post a second picture, but basically I would like the fifth picture to be under the first one.
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Jean Iturralde</title>
<meta name="description" content="Portfolio de Jean Iturralde"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.backstretch("img/wooden.png");
});
</script>
</head>
<body>
<div id="sidebar">
<header>
<h1>Jean Iturralde</h1>
<ul>
<li><a class="active" href="#">Portfolio</a></li>
<li>Blog</li>
<li>CV</li>
<li>Contact</li>
</ul>
</header>
<div id="circle_pic">
<div id="circle_pic_hover"><p>Jean<br />62 ans<br />Peintre<br /></p></div>
</div>
<section>
<div class="sidebar_title"><img src="img/quotes.png" class="icon" /><h2>Bienvenue,</h2></div>
<p class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae magna quam, commodo vulputate nulla. Mauris fringilla mi sapien, in semper turpis. Aliquam consequat magna nec magna egestas vitae aliquet turpis lacinia. Praesent commodo commodo scelerisque. Maecenas dui urna, egestas vel commodo quis, adipisci.</p>
</section>
<footer>
<p>
Jean Iturralde<br />
Tous droits réservés<br />
</p>
</footer>
</div>
<div id="wrap">
<div id="content">
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_1.jpg">
<div class="meta">
<h2>Tableau 1<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_2.jpg">
<div class="meta">
<h2>Tableau 2<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_3.jpg">
<div class="meta">
<h2>Tableau 2<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_4.jpg">
<div class="meta">
<h2>Tableau 4<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_5.jpg">
<div class="meta">
<h2>Tableau 4<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
#font-face {
font-family: 'museo_sans500';
src: url('fonts/museo_sans_500-webfont.eot');
src: url('fonts/museo_sans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/museo_sans_500-webfont.woff') format('woff'),
url('fonts/museo_sans_500-webfont.ttf') format('truetype'),
url('fonts/museo_sans_500-webfont.svg#museo_sans500') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin:0;
}
a{
text-decoration:none;
}
#sidebar{
position:fixed;
left:0;
height:100%;
min-height:720px;
background-color:white;
padding:15px 30px 0 30px;
width:260px;
text-align:center;
}
header h1{
margin:0 0 10px 0;
}
header h1 a{
color:#303030;
font-family: 'Lobster', cursive;
font-size:40px;
font-weight:normal;
margin:0;
}
header ul{
list-style:none;
margin: 0 0 0 -25px;
}
header li a{
float:left;
font-family:'museo_sans500';
font-size:15px;
color:#afafaf;
transition: all 500ms;
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
-ms-transition: all 500ms;
border-top:solid 7px #ababab;
padding:8px 8px 0 8px;
}
header li a:hover{
color:black;
border-top:solid 7px #303030;
}
header li a.active{
color:black;
border-top:solid 7px #303030;
}
#circle_pic{
width:174px; height:174px;
-webkit-border-radius: 87px; -moz-border-radius: 87px;
background:url(img/profilepic.png) no-repeat;
margin:70px 0 20px 0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#circle_pic_hover{
background-color:rgba(0,0,0,0.5);
width:auto; height:175px;
margin-top:175px;
overflow:hidden;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#circle_pic_hover p{
font-family: 'Open Sans', sans-serif;
color:white;
font-weight:400;
font-size:16px;
line-height:27px;
margin-top:45px;
}
#circle_pic:hover #circle_pic_hover{
margin-top:0;
}
section{
margin-bottom:40px;
}
.sidebar_title{
text-align:left;
}
.icon{
margin-bottom:-2px;
margin-right:10px;
display:inline;
height:30px;
}
#sidebar h2{
display:inline;
margin:0;
font-size:29px;
color:#d9d9d9;
font-family: 'Open Sans', sans-serif;
font-weight:400;
}
.main_text{
font-family:'museo_sans500';
color:#252525;
margin-top:0;
font-size:13px;
text-align:justify;
line-height:25px;
}
footer {
width:260px;
position:absolute;
left:50%;
bottom:5px;
margin-left:-130px;
}
footer p{
text-align:center;
font-family:'museo_sans500';
color:#959595;
font-size:11px;
margin-bottom:25px;
}
footer a{
color:#353535;
}
#wrap{
position:absolute;
left:320px;
top:30px;
right:0;
}
#content{
text-align:center;
color:white;
}
/*******/
.box {
position:relative;
display:inline-block;
width:24%;
padding-bottom:31%;
}
.boxcontent {
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
overflow:hidden;
}
.boxcontent img{
width:100%;
}
.boxcontent .meta{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom:-52px;
background: #000;
background: rgba(0, 0, 0, 0.7);
color: #FFF;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
font-family:'museo_sans500';
}
.meta h2,h3{
color:#b0b0b0;
margin:0;
}
.meta h2{
font-weight:bold;
font-size:15px;
margin-bottom:3px;
}
.meta h3{
font-weight:normal;
font-size:11px;
font-style:italic;
}
.boxcontent:hover .meta{
margin-bottom:0;
}
#media only screen and (max-width : 650px) {
/* Smartphone view: 1 tile */
.box {
width: 76%;
padding-bottom: 100%;
}
#sidebar{
position:static;
margin-top:0;
width:100%;
min-height:0;
height:120px;
}
header{
width:280px;
margin:0 auto;
}
nav ul{
margin:0 0 0 -15px;
}
#circle_pic, section, footer{
display:none;
}
#wrap{
position:static;
margin-top:30px;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 76%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 1390px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 38%;
padding-bottom: 50%;
}
}
Thanks for your help.
I would change the way you are positioning #sidebar and #wrap to start with.
I would change the styles on #sidebar to be:
#sidebar {
background-color: #FFFFFF;
float: left;
height: 100%;
left: 0;
min-height: 720px;
padding: 15px 30px 0;
position: fixed;
text-align: center;
width: 16%;
}
All I have done on this is removed the hard-coded width: 260px to make the design a little bit easier to work with and removed the redundant left: 0. If I was to continue refining the design I would change other declarations slightly but that is beyond the scope of the question.
Next, I would change the style of #wrap to be:
#wrap {
float: right;
margin-right: 1%;
width: 78%;
}
And finally change the style of .box to be:
.box {
display: inline-block;
float: left;
padding-bottom: 31%;
position: relative;
width: 25%;
}
Obviously you can play with the margins and widths to get the design looking exactly as you want but this should get you into a rough position.
Try changing text:align: center to text-align:left for #content, unless this introduces a problem I cannot see (?)
Rather than aligning the images with a text-align, you can use float:left; instead. However, based one your current CSS/HTML, this moves the images too far to the left. What you can do instead, if change the way the entire list is being centered.
So:
#content {
padding:0 12%;
/* remove the text-align declaration */
}
.box {
float:left;
width:50%;
}
This would be a more flexible layout. Play with the values to get the sizes you want (the padding value, for example... this can be a % or em or px value here, because the .box is % based.)
Try using the last-child pseudo-class:
.box:last-child {
float: left;
left: 121px;
}
You could create a table in the place of using the divs in order to force the images into the layout you want. Then no need to worry about the text-align: center; in your content block.