I am learning front end web development and I am stuck with how to make my website responsive. I am currently trying to stop my navigation from overlapping onto the next div container. How do I do this please and if you have any other tips on how to make my website responsive that would be great thanks.
Am I using the media queries correctly? I'm now aware I should be using a mobile first approach, but at first I was just copying a mockup I saw online so I had to do it the other way around.
My code is on codepen, here: https://codepen.io/wmufunde/pen/vYYWOBy
<html>
<head>
<title>Best Bakery Company</title>
<link href="https://fonts.googleapis.com/css?family=Jomolhari|Tangerine|Work+Sans&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li id="logo-top">Best Bakery Company</li>
<li class= "nav">WELCOME</li>
<li class= "nav">MENU</li>
<li class= "nav">RESERVATIONS</li>
<li class= "nav">NEWS</li>
<li class= "nav">CONTACT</li>
<li class= "nav"><i class="fab fa-twitter"></i></li>
<li class= "nav"><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</nav>
<div id="headings">
<h1>Pastry with love</h1>
<h2>We're bringing you fresh ingredients<br> everyday in ways you can't resist.</h2>
<button class="btn">Menu</button>
</div>
</header>
<body>
<div class="row" id="background1">
<div class="column">
<h1>Art of cakes</h1>
<h2>We create delicious memories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<h3>Chef cook</h3>
<div = id="chef"><img src="img/chef.jpg" align="middle"></div>
<p id="cursive">Unique creatives for unique reasons</p>
</div>
<div class="column" id="relative">
<div class ="row-pastry" id="padding">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry1.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry2.jpg">
</div>
<div class="row-pastry">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry3.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry4.jpg">
</div>
<div id="icon"><p>TASTES SO <br>GOOD!</p></div>
</div>
</div>
<div class="row" id="background2">
<div class="column center"id="white">
<h1>Tasty Pancakes</h1>
<h2>Season Favourites</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<div class="image-circle">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/blueberry.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake2.jpg">
</div>
</div>
</div>
<div class="row" id="background3">
<div class="column breakfast">
<h1>Breakfast</h1>
<p>7AM Breakfast? We're Open!</p>
<h2>Full Breakfast</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>£12.50</h3>
<h2>Toast and Jam</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>3.50</h3>
<h2>Muffins</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>£4.99</h3>
</div>
</div>
<div class="row" id="background4">
<div class="column meal">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/wheat.jpg">
<h1>Wheat</h1>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/eggs.jpg">
<h1>Eggs</h1>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/cheese.jpg">
<h1>Cheese</h1>
</div>
<div class="column sandwich">
<h1>The Jibarito Sandwich</h1>
<h2>The Best Sandwich you've Ever Tasted!</h2>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/sandwich.jpg">
</div>
</div>
<script src="https://kit.fontawesome.com/5b02610863.js" crossorigin="anonymous"></script>
</body>
<footer>
<ul>
<li>Our Menu</li>
<li>Gallery</li>
<li>Culture</li>
<li id="logo-footer">Best Bakery Company</li>
<li>Events</li>
<li>Catering</li>
<li>Visit Us</li>
</ul>
</footer>
/* ==========================================
Page 1 & Navigation
============================================ */
header {
background-image: url("http://wadzanai.co.uk/100daysofcode/Day7/img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: -20px;
z-index: 1500;
width: 100%;
/* display: block; */
}
nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
background: rgba(0,0,0, 0.5);
height: 50px;
}
a {
text-decoration: none;
color:white;
}
nav ul li {
list-style: none;
color: white;
padding-top: 1%;
font-family: 'Work Sans', sans-serif;
}
#logo-top {
font-family: 'Tangerine', cursive;
font-size: 45px;
padding-top: 0;
flex-grow: 5;
}
nav ul li {
flex-grow: 1;
}
header h1 {
font-family: 'Jomolhari', serif;
color: white;
font-size: 50px;
letter-spacing: 5px;
}
header h2 {
font-family: 'Work Sans', sans-serif;
font-size: 20px;
color: white;
letter-spacing: 5px;
}
#headings {
display: flex;
min-height: 80vh;
width: 100%;
flex-direction: column;
}
#headings h1,h2, .btn {
margin: auto;
}
.btn {
padding: 20px 80px;
background: rgba(0,0,0, 0.5);
border-radius: 50px;
border-color: black;
color:white;
}
.row {
display: flex;
justify-content: flex-start;
position: relative;
height: 100vh;
}
/* ==========================================
Page2
============================================ */
#background1 {
background-color: beige;
}
.column{
width:50vw;
}
.column h1, h2 {
font-family: 'Jomolhari', serif;
}
.column h1, h2, h3, p, #chef img {
text-align: center;
}
.column h1 {
font-size: 50px;
color: #330000;
}
.column h2 {
font-size: 25px;
color: saddlebrown;
}
.column p {
font-family: 'Work Sans', sans-serif;
}
#cursive{
font-family: 'Tangerine', cursive;
font-size:50px;
}
#chef img{
border-radius: 50%;
width: 15vw;
height: 20vh;
display: block;
margin-left: auto;
margin-right: auto;
}
.row-pastry img {
height: 25vh;
width: 150%;
}
.row-pastry {
width: 25%;
display: flex;
padding-left: 5vw;
}
#padding {
padding-top: 15vh;
}
#icon{
width: 50%;
position: absolute;
top: 27%;
right: 26.5%;
background-color: white;
height: 200px;
display: flex;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#icon p{
padding-top: 20%;
padding-left: 35%;
}
#relative {
position: relative;
}
/* ==========================================
Page 3
============================================ */
#background2 {
background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.center {
margin: auto;
}
#white {
background: white;
height:60%;
width:50vw;
margin: auto;
padding: 2%;
}
.image-circle {
display: flex;
flex-direction: row;
justify-content: space-around;
min-height: 50vh;
}
.image-circle img {
height: 10vh;
width: 5vw;
border-radius: 50%;
}
/* ==========================================
Page 4 - Breakfast Menu
============================================ */
#background3 {
background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background3.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
min-width: 50vw;
}
.breakfast {
background:rgba(255, 255, 255, 0.75);
margin:auto;
width: 25vw;
height: 100vh;
}
/* ==========================================
Page 5 - Sandwich
============================================ */
#background4 {
background: beige;
padding: 2%;
}
.meal {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 50vw;
}
.meal img {
width: 10vw;
border-radius: 50%;
margin: auto;
}
.meal h1 {
font-size: 25px;
text-align: left;
margin: auto;
}
.sandwich img {
width: 33vw;
}
/* ==========================================
Footer
============================================ */
footer {
background-color: saddlebrown;
}
footer ul li {
list-style: none;
color:black;
font-size: 25px;
font-family: 'Work Sans', sans-serif;
flex-grow: 1;
}
footer ul {
display: flex;
justify-content: space-between;
align-items: center;
}
#logo-footer {
font-family: 'Tangerine', cursive;
font-size: 45px;
flex-grow: 2;
}
/* ==========================================
Transitions and Transforms
============================================ */
li a:hover {
color: yellow;
}
.btn {
transition-duration: 2s;
transition-property: scale;
}
.fab {
transition-duration: 0.5s;
transition-property: scale;
}
.fab:hover, .btn:hover {
transform: scale(1.2);
}
/* Page 2 */
.image-circle img {
transition-duration: 1s;
transition-property: transform;
}
.image-circle img:hover {
transform: rotate(30deg);
}
/* ==========================================
Page 1 & Navigation Media Queries
============================================ */
#media screen and (max-width: 850px) {
nav ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 250px;
text-align: center;
}
footer ul {
flex-direction: column;
flex-wrap: nowrap
}
.breakfast {
width: 50vw;
}
.center h1 {
font-size: 30px;
}
.center h2 {
font-size: 20px;
}
.center p {
font-size: 15px;
}
}
#media screen and (max-width: 625px) {
.sandwich h1 {
font-size: 30px;
}
.sandwich h2 {
font-size: 20px;
}
}
#media screen and (max-width: 600px) {
.row-pastry {
flex-direction: column;
}
.row-pastry img {
height: auto;
}
#icon {
display: none;
}
}
Related
I'm having problems trying to make the bottom of my div to look like this.
I tried using border radius to get the curved result at the bottom right but I don't know how can I create this straight line at an angle.
Here's my current code.
<div>The code is in the link</div>
Check out this code and use the transform property Perspective
transform: perspective(value);
The mention thing is an illustration used as the background image. It would be a good practice if you try it so check out my Codepen Work for source code.
.innerlayer{
width: 650px;
height: 400px;
background-color: #00bcd4;
margin: auto;
transform: perspective(1000px) rotatey(18deg);
border-bottom-right-radius: 35%;
}
.outerlayer{
position: relative;
padding: 0px;
}
.tophidden{
width: auto;
height: 80px;
background-color: #fff;
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
}
<div class="outerlayer">
<div class="tophidden">
<div class="innerlayer"></div>
</div>
</div>
Watch it in full screen view
I suggest you to use :before pseudo element, and skew it.
Here you can find your modified code
body {
margin: 0;
}
.navbar {
// make sure wrapper of pseudo has position: relative
position: relative;
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(72deg, rgba(100,36,220,1) 0%, rgba(118,107,254,1) 100%);
// set border radius size
border-bottom-right-radius: 10rem;
// set skew angle
transform: skewY(-2deg);
transform-origin: left bottom;
}
.container {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
max-width: 1270px;
width: 100%;
padding: 1.125rem 1.5rem 1.125rem 1.5rem;
}
.logo {
color: white;
margin-right: 3em;
text-transform: lowercase;
font-size: 42px;
align-items: center;
font-weight:700;
}
nav {
display: flex;
margin-top: 1em;
}
.primary-nav {
display: flex;
align-items: center;
}
.nava {
font-size: 20px;
font-weight: 400;
}
a {
color: white;
margin-right: 1em;
}
.second-nav {
display: flex;
align-items: center;
}
.contact-nav {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #5008d9;
background:white;
border-radius: 360px;
padding: 0.9rem 2rem 0.9rem 2rem;
}
.cda {
display: flex;
justify-content: space-between;
padding-top: 5em;
padding-bottom: 5em;
}
.cta-left {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
margin-top: 5em;
padding-bottom: 15em;
}
h2 {
color: white;
font-size: 70px;
font-weight: 600;
line-height: 1.0;
}
p {
color: white;
}
.cta-right {
width: 50%;
}
img {
width: 100%;
}
.cta-p {
margin-top: 2em;
}
.learn-more {
margin-top: 3em;
}
.learn {
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
color: black;
background:#00dadc;
border-radius: 360px;
padding: 0.9rem 4rem 0.9rem 4rem;
}
}
<header>
<div class="navbar">
<div class="container">
<nav>
<ul class="primary-nav">
<a class="logo" href="#">Agency</a>
<li><a class="nava" href="#">Home</a></li>
<li><a class="nava" href="#">About Us</a></li>
<li><a class="nava" href="#">Our Services</a></li>
<li><a class="nava" href="#">Support</a></li>
</ul>
</nav>
<nav>
<ul class="second-nav">
<li><a class="contact-nav" href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="cda">
<div class="cta-left">
<h2>Creative <br> Design Agency</h2>
<p class="cta-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Etiam vel dolor id nulla gravida blandit.</p>
<div class="learn-more">
<a class="learn" href="#">Learn More</a>
</div>
</div>
<div class="cta-right">
<img src="images/doge.jpeg" alt="">
</div>
</div>
</div>
</div>
</header>
I am trying to put a logo image in the top left were SYLK is. It keeps going to the center of the page. I need the image to go where sylk is on the page. I tried just adding the img into it but it goes right to the center. Any help is much appreciated. The logo is going to act as a home button.
HTML
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
sylk
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection of 9,999 Yetis</h2>
<p>A Colorful, Engaging and Inovating Community. The Sweti Yeti's, a community focused club.
</p>
<h2>Yeti Trip</h2>
<div class="container">
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9999 unique Sweti Yeti's will be created.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre Jan 22nd, Pre Feb 12, Full Feb 14</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is SWETI?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share With Everyone To Inspire. Our goal is to make it easier for guys like us, who have big visions but little support in execution. Also relates to kid charity shtuff.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 1.2em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat";
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background-color: #1c0522;
}
.timeline {
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background-color: #655ee1;
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
#media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: gray;
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-30px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -30px;
}
.timeline-content .date {
position: absolute;
top: -30px;
}
.timeline ul li:hover::before {
background-color: aqua;
}
}
Thanks in advance for any and all help.
Try adding to the header .logoclass
float:left;
margin-top:0;
I copied your code and added a small image I had that is only about 75x39 pixels respectively and it shows even with your menu and about 2" in on my monitor. It's not dead left on my laptop monitor but it should be in the ball park. I add a a bigger image 246x205 and it looks okay.
One thing I noticed when I copied your html and css down, I can't see your entire page. You man need some other modifications. The Mint Now is centered.
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
float:left;
margin-top:0;
position:fixed;
}
Note: I also added a position-fixed at the bottom. This will scroll your logo with the page. If you don't want to do that with your page, just remove the position tag.
If your logo still goes to the center, you may have something else conflicting with the positioning. I just used these two files you posted here.
<header>
<img src="sam.jpg">
Why is my header background is behaving this way and how to change my HTML/CSS in order to ensure the header BG looks the same no matter the screen width, same with the footer. I've tried lots of things and I'm just learning.
I'm including screenshots for specificity.
Here is my HTML:
<!-- ------------------------------- Header -------------------------------- -->
<header>
<div class="container">
<nav class="header-nav">
<div class="logo-container"><h3>travel</h3></div>
<ul class="nav-links">
<li class="nav-link">home</li>
<li class="nav-link">about</li>
<li class="nav-link">blog</li>
<li class="nav-link">contact</li>
</ul>
</nav>
<h1>travel outdoor ipsum dolor sit.</h1>
</div>
</header>
<!-- ------------------------------- Header -------------------------------- -->
<!-- ------------------------------- Footer -------------------------------- -->
<footer>
<div class="container">
<div class="footer-wrapper">
<nav class="footer-nav">
<div class="footer-logo"><h3>travel</h3></div>
<div class="footer-menus">
<ul class="footer-links">
<li>home</li>
<li>about</li>
<li>blog</li>
<li>contact</li>
</ul>
<ul class="social-links">
<li>twitter</li>
<li>facebook</li>
<li>linkedin</li>
</ul>
</div>
<div class="legal">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod ipsam suscipit exercitationem possimus autem ad.</>
</div>
</nav>
<div class="thin-line"></div>
<p>Travel Agency</p>
</div>
</div>
</footer>
<!-- ------------------------------- Footer -------------------------------- -->
CSS:
.container {
width: 1000px;
margin: 0 auto;
}
/* ------------------------------ Global Styles ----------------------------- */
/* ---------------------------------- Header --------------------------------- */
h1 {
font-weight: 700;
color: #333333;
font-size: 6.8rem;
position: relative;
top: 100px;
letter-spacing: 1.5px;
width: 550px;
}
.header-nav a {
font-size: 1.9rem;
font-weight: 700;
color: #333333;
text-transform: uppercase;
padding: 10px;
}
.header-nav a:hover {
background-color: #16D6D1;
border-radius: 1rem;
border-style: none;
color: #F6F8FA;
}
.header-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
position: relative;
}
.nav-links {
display: flex;
}
.nav-link {
margin-right: 3rem;
}
header {
height: 50vh;
width: 100%;
background: url(./images/image-main.jpeg);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
/* ---------------------------------- Header --------------------------------- */
/* --------------------------------- Footer --------------------------------- */
footer {
background: #F6F8FA;
}
.footer-wrapper {
height: 350px;
}
.footer-nav {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.footer-menus {
display: flex;
position: relative;
left: 125px;
text-transform: uppercase;
line-height: 40px;
margin-top: 25px;
margin-bottom: 75px;
}
.footer-menus a {
color: #333333;
font-size: 1.9rem;
font-weight: 700;
}
.footer-links {
margin-right: 25px;
}
.social-links {
margin-right: 25px;
}
.legal {
width: 275px;
line-height: 30px;
color: #777777;
}
.thin-line {
border-bottom: 1px solid #777777;
}
footer p {
font-weight: 500;
color: 777777;
}
/* --------------------------------- Footer --------------------------------- */
Screenshots of page:
What I want it to look like:
page snapshot, intended look as static
What's happening that I don't want:
...not what I want
Any feedback also is welcome, learning and improving! Thank you very much in advance anyone who can take the time to give some advice.
Basically, we added a new div right after the header, in main element, we gave it a class and styled the width 100%, height 600px and background-image to cover the div which fits on it's place, exactly under the header.
Open Full Page it's responsive (The other content of the page below also styled mobile responsive Basic setup).
I hope this helps,
Enjoy your time coding =D.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 10px;
}
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
position: relative;
}
#media (min-width: 576px) {.container {max-width: 540px;}}
#media (max-width:576px) {.container {padding: 0;}}
#media (min-width: 768px) {.container {max-width: 760px;}}
#media (min-width: 992px) {.container {max-width: 960px;}}
#media (min-width: 1200px) {.container {max-width: 1190px;}}
header {
height: 70px;
display: flex;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-around;
}
.list {
list-style-type: none;
display: flex;
}
.item {
font-size: 1.1rem;
margin: 0 10px;
text-transform: uppercase;
font-weight: bold;
color: #1a4379;
}
.main-box {
background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
height: 600px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-bottom: 30px;
}
.other-content {
position: relative;
width: 100%;
height: 450px;
display: flex;
margin-bottom: 30px;
}
.content1 {
width: 250px;
height: 100%;
background-image: url(https://www.w3schools.com/w3css/img_mountains.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-right: 20px;
}
.content2 {
width: 100%;
height: 100%;
background-color: #dedede;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.content2-img-box {
width: 100%;
height: 280px;
}
.content2-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content2-info-box {
text-align: center;
}
.content2-info-box p {
margin: 15px 0;
font-size: 1.1rem;
}
.content2-info-box h1 {
margin-bottom: 20px;
}
.content2-info-box button {
font-size: 1.2rem;
padding: 5px 8px;
border-radius: 4px;
outline: none;
cursor: pointer;
border: 1px solid #b5b5b5;
margin-bottom: 10px;
}
#media(max-width: 576px){
.other-content {
flex-direction: column-reverse;
height: auto;
}
.content1 {
width: 100%;
margin-right: 0;
height: 400px;
margin-bottom: 10px;
}
.content2 {
width: 94%;
margin: 10px auto 25px auto;
}
}
<header>
<nav class="navbar container">
<div class="logo-container">
<img src="..." alt="Travel" class="logo-img">
</div>
<div class="list-container">
<ul class="list">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Blog</li>
<li class="item">Contact</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<div class="main-box"></div>
<div class="other-content">
<div class="content1"></div>
<div class="content2">
<div class="content2-img-box">
<img src="https://www.w3schools.com/w3css/img_nature.jpg" alt="">
</div>
<div class="content2-info-box">
<p>Lorem</p>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<button>Read More</button>
</div>
</div>
</div>
</div>
</main>
Try this:
background-size: 100% auto;
or:
background-size: cover;
Maybe try adding
background-size: cover;
If that doesn't work, maybe try to add a background to the container rather than the header.
I set the top navigation bar as being sticky on top, but it's acting weird in some places.
Here's the fiddle link https://jsfiddle.net/benjaminana77/pugek2f8/30/ and I reproduced code below.
I'm having problems in three places
In the hero image section, top nav background is incorrectly being transparent. I set the background color as white, not transparent.
The top nav bar incorrectly shows BEHIND a slider, not above the slider.
When you hover over an item in the grid layout, the item shows above the top nav bar.
normal state:
when you hover over an image:
Many thanks in advance!
HTML:
<div class="boxA">
<div class="box1">
<div class="site">
<img src="img/logo.png">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>
<div class="body-part">
<section class="conA">
<div id="container">
<div id="heroText">
<p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit</p>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>
<ul class="slider" style="padding:0px !important;">
<li><img src="img/sample.png">
<div class="caption1">caption 1</div>
</li>
<li> <img src="img/Group 3.png">
<div class="caption2"></div>
<div class="caption3">caption 2</div>
<div class="caption5">caption 3</div>
<div class="caption4">caption 4</div>
</li>
</ul>
<section id="conD">
<div class="container">
<div class="grid menu-content" id="menu1-content">
<article>
<a href="#">
<div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG);"></div>
<div class="text">
<h3>Title </h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
</div>
</div>
</section>
CSS:
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 ul {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px 50px;
color: inherit;
text-decoration: none;
font-size: 12px;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
.box2 li {
float: left;
width: auto;
font-family: 'Gotham';
letter-spacing: 2.5px;
}
.box1 img {
position: absolute;
width: 20%;
height: auto;
}
#top-logo {
margin-top: 40px;
}
#top-logo img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
height: auto;
}
body {
font-family: gotham;
margin: 0px !important;
color: #827F88;
letter-spacing: 0.4px;
line-height: 1.9;
}
.conA {
height: 100vh;
display: flex;
position: relative;
}
.conA #container {
margin: 0;
display: flex;
align-items: flex-start;
position: absolute;
top: 50%;
left: 10%;
transform: translate(0%, -50%);
}
#heroText {
font-size: 37px;
color: #56525E;
line-height: 1 !important;
}
.conA #heroText {
height: 400px;
padding-top: 100px;
}
#conD ul {
margin: 0 0 30px -30px;
padding: 0;
list-style: none;
}
#conD li {
padding: 35px;
display: block;
text-decoration: none;
font-size: 15.5px;
letter-spacing: 2px;
color: inherit;
}
#conD li {
float: left;
width: auto;
}
#conD ul:after {
content:"";
display: block;
clear: both;
}
#conD .menu {
margin-bottom: 20px
}
.grid {
display: grid;
justify-content: start;
margin-top: -20px;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid a:hover {
opacity: 0.8;
}
JQUERY:
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 3000,
mode: 'fade',
speed: 1200,
pager: false
});
});
(function ($) {
$(document).ready(function(){
// hide .navbar first
$(".boxA").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 50) {
$('.boxA').fadeIn();
$('#top-logo').fadeOut();
} else {
$('.boxA').fadeOut();
$('#top-logo').fadeIn();
}
});
});
});
}(jQuery));
Add z-index:2 on .boxA
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
z-index: 2;
}
.body-part{
position: relative;
z-index: 1;
}
https://jsfiddle.net/lalji1051/24rm0yvt/
updated link - https://jsfiddle.net/lalji1051/24rm0yvt/3/
I'm currently creating media queries for my current project, the problem I'm currently facing is that something is causing my navbar to not be responsive below width of 600px. What happens is show in the attached image.
I've actually solved this problem once before in a previous project but can't remember how I solved this problem even after comparing the code.
HTML
<!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">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav-bar">
<span class="open-slide">
<i class="fas fa-bars fa-2x"></i>
</span>
<ul class="nav-items">
<li>About</li>
<li>Events</li>
<li>Order</li>
<li>Locations</li>
</ul>
</nav>
</header>
<main>
<section id="about">
<div class="about-text">
<h1>Comics.Cards.Fun</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, neque ipsa nisi voluptatum distinctio asperiores dolorem obcaecati reiciendis sunt eaque veritatis omnis, rerum qui aperiam totam magnam sit facilis quod.</p>
</div>
</section>
<section id="events">
<h1>Events</h1>
<div class="cards-container">
<% Event.all.each do |event|%>
<div class="event-card">
<div class="overlay"></div>
<div class="event-date">
<span class="date"><%= event.date %></span>
</div>
<div class="event-image">
<%= image_tag event.image_url.to_s %>
</div>
<div class="event-data">
<div class="event-title">
<h3><%= event.title %></h3>
</div>
<p class="event-details"><%= event.description %></p>
</div>
</div>
<% end %>
</div>
</section>
<section id="order">
<h1>Order</h1>
<p>Looking for your monthly fix of comics? Just order from us!</p>
<div class="order-steps">
<div class="fill-form">
<i class="far fa-list-alt fa-10x"></i>
<p>
List down all the comics you wish to order.
</p>
</div>
<div class="email-us">
<i class="far fa-envelope fa-10x"></i>
<p>
Email it to us at the
<br>
lastcomicshop#gmail.com
<br>
Deadline is the 20<sup>th</sup> of every month
</p>
</div>
<div class="delivery">
<i class="fas fa-truck fa-10x"></i>
<p>
If you wish to have your comics delivered, just give us your address!
</p>
</div>
</div>
</section>
<section id="locations">
<h1>Locations</h1>
<div class="location-div">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.8821426536624!2d101.61402541462657!3d3.1258517541674418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49cb25b5c01b%3A0xfcdf88c63a471fd6!2sThe+Last+Comic+Shop!5e0!3m2!1sen!2smy!4v1554862822510!5m2!1sen!2smy" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="address">
<p>
75A, Jalan SS22/23,
<br>
Damansara Utama,
<br>
47400 Petaling Jaya, Selangor
</p>
</div>
</div>
</section>
</main>
<footer>
<div id="contact-us">
<p>Connect with us:</p>
<div class="contact-outlets">
<i class="fab fa-facebook-square fa-3x"></i>
<i class="far fa-envelope fa-3x"></i>
</div>
</div>
</footer>
</body>
</html>
SCSS
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
// Navbar
.nav-bar {
width: 100%;
height: 8%;
display: flex;
position: fixed;
z-index: 1;
overflow: hidden;
justify-content: center;
align-items: center;
background-color: rgba(33, 33, 33, 0.9);
color: white;
}
.nav-bar > ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-bar > ul > li {
list-style: none;
color: white;
padding: 0 2rem;
}
.nav-bar > ul > li > a {
text-decoration: none;
color: inherit;
font-family: 'Bree Serif', serif;
font-size: 21px;
}
// Sections
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
color: white;
h1 {
font-family: 'Bree Serif', serif;
font-size: 53px;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 26px;
}
}
#about {
background-color: rgba(243, 63, 63, 0.8);
.about-text {
position: absolute;
top: 45%;
}
}
#events {
background-color: rgba(63, 63, 243, 0.8);
.cards-container {
position: absolute;
top: 25%;
width: 100%;
height: 100%;
display: flex;
}
}
#order {
background-color: rgb(25, 134, 25);
.order-steps {
position: absolute;
top: 35%;
display: flex;
flex-direction: row;
justify-content: space-around;
.fill-form,
.email-us,
.delivery {
width: 20%;
i {
padding-bottom: 1rem;
}
}
}
}
#locations {
background-color: rgb(245, 233, 63);
.location-div {
width: 100%;
position: absolute;
top: 25%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
#contact-us {
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5rem 0;
p {
font-size: 1.2rem;
}
.contact-outlets {
width: 125px;
display: flex;
justify-content: space-between;
}
}
// Event cards
.event-card {
width: 30%;
height: 58%;
position: relative;
// background: url(https://idigitalcitizen.files.wordpress.com/2009/08/6x4-autobobots-logo.jpg) 50% / cover no-repeat;
margin: 0 1.3rem;
overflow: hidden;
border-radius: 8px;
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
visibility: hidden;
}
.event-date {
position: absolute;
top: 0;
left: 0;
padding: 0.8rem;
background-color: #77d7b9;
display: flex;
flex-direction: column;
.date {
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.month {
text-transform: uppercase;
}
.month,
.year {
font-size: 12px;
}
.event-image {
width: inherit;
height: inherit;
}
}
.event-data {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
z-index: 2;
padding: 0.8rem 0.5rem;
background-color: white;
color: black;
// Takes the height of the h3 tag with the class event-title and adds 3.5rem to hide the event details.
transform: translateY(calc(145px + 0.5rem));
transition: transform 0.5s;
.event-title {
font-family: 'Bree Serif', serif;
width: 100%;
height: 60px;
margin-bottom: 2rem;
}
.event-details {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
bottom: 0;
}
}
// When user hovers their mouse over the card, the event details pop up.
&:hover {
.overlay {
visibility: visible;
opacity: 0.5;
transition: opacity 0.5s, visibility 0.5s, ease;
}
.event-data {
transform: translateY(0);
transition: transform 0.5s;
}
}
}
// Responsive design
// Extra Small & Small devices
#media screen and (max-width: 600px) {
// navbar
.nav-bar {
ul {
display: none;
}
}
}
The problem is that you set your navbar to 100% width (which is fine), but since your iframe's width is 600px it allows your navbar to stretch all the way to reach this "100%" width. Change your iframe width to the page's width so your navbar and your page won't go off-boundary. Like this:
<iframe src="..." width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
Once that's done, I'd recommend reducing the nav items' font-size to have them all fit on your nav bar.