Apply center position to the gallery but not to the pictures - html
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.
Related
My main content is being affected by something on the page, won't center properly
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
How do I make the text appear under the center of the recipe image and be an equal distance from each other with css?
So I am trying to create a website with recipes, so I put images of the recipes, with the name of the recipe underneath, but the problem is that they are not landing in the center beneath the image. They are the same distance apart, but I can't get each text to go under the image in the center. How would I do this? I would suggest viewing the result of the code in full view because I have not coded the website to work properly when the window is minimized. Also, you won't see the images because they are files on my computer.
<style>
body{
background: rgb(239,239,239);
padding:0;
margin:0;
}
a:nth-child(2) {
margin-left: 300px;
}
nav{
height: 120px;
length:relative;
background: rgb(250,131,131);
}
.header{
overflow:hidden;
background-color: white;
padding: 20px 10px;
}
.header-right a {
float:right;
color:black;
text-align:center;
padding:12px;
text-decoration:none;
font-family: 'Paprika', cursive;
font-size:18px;
line-height: 25px;
border-radius:4px;
font-size:14px;
}
.header a.logo{
font-size: 25px;
font-weight: bold;
float:left;
font-family:"Poppins", cursive;
text-decoration:none;
color:black;
letter-spacing: 10px;
}
.header-right a:hover{
background-color: rgb(248,248,248);
color:black;
}
.header a.active {
background-color: rgb(225,225,225);
color:black;
}
.header-right input[type=text] {
float:right;
padding:6px;
margin-top:9px;
margin-right:16px;
font-size:17px;
}
.latest{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
}
.simple{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
font-size: 12px;
margin-top:300px;
}
hr{
width:10%;
}
.doball:hover, .cookie:hover, .cake:hover, .snacks:hover{
transform:scale(1.2);
box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
a:nth-child(2) {
margin-left: 300px;
}
.choccook{
height:150px;
margin-left:50px;
margin-top:100px;
margin-bottom:50px;
width:230px;
height:230px;
}
.oreocak, .coffcake, .granbar,.banbread, .cinnroll{
height:150px;
margin-left:1.5px;
margin-bottom:50px;
width:230px;
height:230px;
object-fit:cover;
}
.choccook:hover, .oreocak:hover, .coffcake:hover, .granbar:hover, .banbread:hover, .cinnroll:hover{
opacity:50%;
}
.recip{
margin-left:50px;
margin-top:-50px;
font-size: 14px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing: 5px;
}
.recipnameone,.recipnametwo, .recipnamethree, .recipnamefour, .recipnamefive{
margin-left:100px;
}
.doball, .cookie, .cake, .snacks{
margin-left:30px;
margin-bottom:100px;
width:80px;
height:80px;
object-fit:cover;
transition: 0.5s ease;
border-radius:50%;
}
.categories{
margin-left:550px;
}
.circone{
font-size: 13px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing:3px;
}
.categnames{
margin-left:40px;
margin-top:-120px;
}
.circtwo, .circthree, .circthree, .circfour{
margin-left:55px;
.recipnamefive{
font-size:13px;
}
.recippics{
margin-top:-80px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Bake It Simple</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Paprika&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pavanam&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
BAKE IT SIMPLE
<div class="header-right">
About
Recipes
<input type="text" placeholder="Search...">
</div>
</div>
<h3 class="latest">LATEST RECIPES</h3>
<hr>
<div class="recippics">
<img class="choccook" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="oreocak" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="coffcake" src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg" href="#"></img>
<img class="granbar" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<img class="banbread" src="file:///C:/Users/Pranavi.Kedari/Pictures/bananabread.jpg" href="#"></img>
<img class="cinnroll" src="file:///C:/Users/Pranavi.Kedari/Pictures/cinnamonrolls.jpg" href="#"></img>
</div>
<p class="recip"><span class="recipname"> C.C. COOKIES</span> <span class="recipnameone"> OREO CAKE</span> <span class="recipnametwo"> COFFEE CAKE</span> <span class="recipnamethree"> GRANOLA BARS</span> <span class="recipnamefour"> BANANA BREAD</span> <span class="recipnamefive"> CINNAMON ROLLS</span></p>
<h3 class="simple">SO SIMPLE, IT TASTES BETTER</h3>
</hr>
<div class="categories">
<img class="doball" src="file:///C:/Users/Pranavi.Kedari/Pictures/doughcirc.jpg" href="#"></img>
<img class="cookie" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="cake" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="snacks" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<div class="categnames">
<p class="circone"> DOUGHS <span class="circtwo"> COOKIES</span> <span class="circthree"> CAKES</span> <span class="circfour"> SNACKS</span></p>
</div>
</div>
</div>
</body>
</html>
You have your recipe names separate from your recipe images, which is difficult (if not impossible) to get everything to align. It would be easier to associate the names with the images in separate blocks. I set each block to float left to show how to align the text, but you could use flex to setup how your recipes will work on different screen sizes.
.recipe {
position: relative;
float: left;
padding: 0;
margin: 0;
margin-left: 25px;
width: 150px;
}
.recipe img {
width: 100%;
height: auto;
}
.recipe p {
width: 100%;
text-align: center;
}
<div class="recippics">
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg">
<p>C.C. COOKIES</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg">
<p>OREO CAKE</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg">
<p>COFFEE CAKE</p>
</div>
</div>
For future questions, you don’t need to include all of the unused stuff like the header CSS. Just include enough to show the problem.
Anchor link cutting off header
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>
Media Queries Not Working and Page is not responsive
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%;}
}
Get footer to go to bottom of display
I got this footer im wanting to go to the bottom of my display and stay there (not so much a fixed position as i want it to change with the content that is in it). at the moment its made to be a sticky footer and moves with the content, im just wanting it to be constantly positioned at the bottom of the display so there isnt this weird floating gap with a huge space beneath it.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contactspace"></div>
<!--close contactspace!-->
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
<div class="contactspace"></div>
<!--close contactspace!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
</i>
Layout CSS:
#charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header{
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333 ;
-webkit-box-shadow: 0px 10px 20px 0px #333 ;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo{
position: absolute;
min-width:60px;
top:4%;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social{
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img{
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu{
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt{
width:100%;
text-align: center;
background:#070707;
font-family: 'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
Content CSS:
#charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap{
margin-top:100px;
width:100%;
text-align: center; /* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content: "";
display: table;
clear: both;
}
.infotxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block; /* make it possible to use text-align */
width: 15%;
min-width: 180px; /* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img{
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%; /*bring back if needed*/
height: auto; /*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
position:relative;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
i wasnt too sure what code was needed and had 2 style sheets that may affect the footer div......So basically im wanting .footerwrap2 to be at the bottom of the browser even after device and browser size changes. Thanks in advance!
I copied all your code into a local page and added the following lines: For the footerwrap2, I changed the position from relative to absolute, and positioned it at the bottom of the page. position:absolute; bottom: 0; As you've probably already found, that wasn't enough. The body, and wrapper div have no idea how TALL the content page is, therefore, they determine the size based on content. I solved the problem by adding the following style to the main wrapper (.wrapper) height: 100vh; This uses the latest CSS3 view height so it will only work on modern browsers. If you must maintain compatibility with older browsers, you'll need to set the height for the body, wrapper, and possibly the html tags to be 100%. I tested it locally and it works like a champ. If you can't get it to work, I'll move it to a fiddle. Good Luck!