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.
Related
How can I set the height of intro section to 100%? The height of the main is set to 100 viewport height (8rem is the height of header and 7.2rem is for the footer) but the intro section does not cover the height of the main. I've also tried to set the height of intro section to 100% but it didn't work.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
Change min-height: calc(100vh - 8rem - 7.2rem) to height: calc(100vh - 8rem - 7.2rem)
There are also a couple other options like adding min-height: inherit to your .intro class or adding something like height: 0.001px to your .main class.
Taken from here: Child inside parent with min-height: 100% not inheriting height
min-height
If the content is smaller than the minimum height, the minimum height
will be applied.
If the content is larger than the minimum height, the min-height
property has no effect.
Aside from your min-height you should add a height to your main class. Also it would be better in your example's case to have a static min-height as it would prevent it from ruining your layout as using vh would always follow viewport's height no matter how short/small it is.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: 600px;
height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
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">
I'm making a project with a big image at the top of the page, followed by a sticky nav.
The info following the nav keeps trespassing!
I have been trying all sorts of things, making the other sections after it have a lower or negative z-index numbers, as well as trying to set the opacity to 99 for the following modules because I read that opacity changes the stacking order.
/*Navigation*/
navigation {
display: block;
box-shadow: 0px 10px 22px #326559;
}
.z {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 500;
}
nav {
display: block;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
align-items: center;
}
nav img {
max-width: 9vw;
}
/*Annonce*/
.annonce {
position: relative;
z-index: -1;
opacity: .99;
}
.annonce p {
margin-top: 50px;
margin-bottom: 50px;
padding: 10px;
}
.annonce img {
padding-bottom: 50px;
}
/*Location Gallery*/
hr {
background-color: #326557;
height: 3px;
margin-bottom: 75px;
}
location-card {
display: block;
border: 2px solid #326557;
margin-bottom: 50px;
background-color: #e5fbe2;
padding: 20px;
position: relative;
z-index: -1;
}
<navigation class="z">
<inner-column>
<nav>
<a href="#" class="icon">
<img src="images/bla.png">
</a>
Sign in
</nav>
</inner-column>
</navigation>
<main>
<section class="annonce">
<inner-column>
<p>Bla bla bla!</p>
</inner-column>
<picture>
<img src="images/image1.jpg">
</picture>
</section>
<?php include('locationCards.php'); ?>
Working on my sticky
I'm going to include my html for the nav.
And a little bit of what comes after that.
I'm including some CSS for both the nav and what comes after, in case another more skilled person can see what my issue is.
Thanks so much
I have already created a site like that, You can search it on google using keywords. "Sticky Navbar".
and I'm going to share my code with you too.
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 30) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
body{
margin:0;
}
header{
position: fixed;
width: 100%;
padding: 5px 20px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.75s;
}
header .logo{
color: rgb(255, 255, 255);
font-weight: 700;
font-size: 30px;
text-decoration: none;
}
header .nav{
position: relative;
display: flex;
}
header .nav li{
list-style: none;
margin-left: 50px;
height:100%;
}
header .nav li a{
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 20px;
}
header.sticky{
background: rgba(255,255,255,0.85);
padding-top:0px;
padding-bottom:0px;
box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
height:3.75rem;
}
header.sticky .logo{
color: rgb(0, 0, 0);
}
header.sticky ul{
height:100%;
}
header.sticky ul li{
height:100%;
display:flex;
align-items: center;
}
header.sticky ul li a{
color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
border-bottom: 5px solid #ff0157;
}
p{
font-weight: 300;
color: #111;
}
.ban{
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
background-repeat: no-repeat;
background-size:cover;
background-position:left;
}
.ban .box{
max-width: 1000px;
text-align: center;
}
.ban .box h3{
font-size: 5rem;
color: #fff;
}
.ban .box p{
font-size: 1rem;
color: #fff;
}
<header id="header">
Avenger
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Expert</li>
<li>contact</li>
</ul>
</header>
<section class="ban" id="ban">
<div class="box">
<h3>Always Choose Good</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
similique dolor saepe earum consequuntur.</p>
Our Menu
</div>
</section>
I think this will help you more!
I am trying to create a hero section for a layout. My problem is that the content (text and buttons) is being obscured by the overlay even after setting a higher z-index value.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
:root {
--primary-color: #c72727;
--secondary-color: #f99500;
--light-color: #f3f3f3;
--dark-color: #333;
--max-width: 1100px;
}
body {
font-family: 'Lato', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
img {
width: 100%;
height: auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #777;
}
i.fab {
color: #777;
}
p {
font-weight: 100;
margin: 1rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Staatliches', cursive;
margin-bottom: 0.55rem;
line-height: 1.3;
margin: 0.5rem 0;
}
/* Utilities */
.container {
max-width: var(--max-width);
margin: auto;
padding: 20px;
}
.btn {
display: inline-block;
cursor: pointer;
padding: 13px 20px;
color: #fff;
}
.btn-primary,
.bg-primary {
background: var(--primary-color);
}
.btn-secondary,
.bg-secondary {
background: var(--secondary-color);
}
.btn-dark,
.bg-dark {
background: var(--dark-color);
}
.bg-light {
background: var(--light-color);
}
.category {
color: #fff;
text-transform: uppercase;
border-radius: 50%;
padding: 10px;
font-size: 10px;
}
.category-sports {
background: var(--secondary-color);
}
.category-entertainment {
background: #a66bbe;
}
.category-tech {
background: #009cff;
}
/* Header */
#header {
position: sticky;
top: 0;
left: 0;
right: 0;
}
#header .container {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
align-items: center;
}
#header .logo {
width: 180px;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
margin-right: 10px;
}
/* Showcase */
#showcase {
height: 500px;
color: #fff;
background: url('../images/featured.jpg') no-repeat center center/cover;
position: relative;
}
#showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
#showcase * {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NewsGrid | The Leading Online News Website</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">
<img src="./images/logo.png" alt="" />
</div>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
<nav>
<ul class="nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
</ul>
</nav>
</div>
</header>
<!-- Showcase -->
<section id="showcase">
<div class="container">
<div class="showcase-content">
<span class="category category-sports">Sports</span>
<h1>Some Sports Article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus
rerum officia quibusdam mollitia deserunt animi soluta laudantium.
Quam sapiente a dolorum magnam necessitatibus quis tempore facere
totam. Dolor, sequi distinctio!
</p>
READ MORE
</div>
</div>
</section>
</body>
</html>
I did set the Z-index for the showcase content to be in front of the image, but it doesn't work. I have tried an identical approach elsewhere and that works.
Am I doing something incorrectly?
Please help, Thanks!
How do I get rid of this white space (in the picture below). I have tried putting the margin 0px with the universal selector but nothing changed(with the big space in the right). I have tried to change the units from px to vhor vw or rembut nothing changed.
Here is my code:
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
/*header section*/
.container{
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100vw;
font-weight: bold;
text-transform: uppercase;
}
.logo-box{
position: relative;
left:10px;
}
.logo{
width: 100px;
}
.main-nav__item{
list-style-type: none;
color: white;
}
.main-nav__item:hover{
color: #ff9900;
cursor: pointer;
}
/*84.2*/
.slideshow-container{
width: 100vw;
position: relative;
margin: auto;
}
.img{
width: 100%;
height: 98vh;
}
.dotz{
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active{
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */
.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {opacity: .4}
to {opacity: 1}
}
/*//////////the end of the header///////////////////*/
/* styling icons */
.icon{
font-size: 2.5rem;
}
.ad{
margin-left: 80px;
margin-bottom: 3px
}
.rot{
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op{
margin-left: 3.12rem;
}
.contact-description{
text-align: center;
font-weight: bold;
font-size: 0.81rem;
}
/*end styling icons */
/* contact-box title */
.contact-title{
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box{
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* about us section*/
.title{
text-align: center;
}
.title-description{
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover{
color: black;
}
.line{
position: relative;
left: 650px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* service section */
.service-image-box{
width: 100%;
height: 50%;
}
.service-image{
width: 100%;
}
.title-service{
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box{
position: relative;
top: 10rem;
height: 0.1px;
left:19rem;
width: 1366px;
}
.hover:hover{
color: #ff9900;
}
.qu{
margin-left: 3rem;
color: white;
}
.service-title{
color: white;
}
.service-description{
color: white;
}
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="">
</div>
<ul class="main-nav__item">
<li>services</li>
</ul>
<ul class="main-nav__item">
<li>reservation</li>
</ul>
<ul class="main-nav__item">
<li>menu</li>
</ul>
<ul class="main-nav__item">
<li>our chefs</li>
</ul>
<ul class="main-nav__item">
<li>events</li>
</ul>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade-zz">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Text</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">2 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">3/3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Three</div> -->
</div>
<!-- The dots/circles -->
<div class="dotz">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--end of the slideshow-->
<!--contact box-->
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt icon ad"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume icon rot"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock icon op"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<!-- about us section -->
<section class="about-us">
</div>
<i class="fas fa-utensils"></i>
<h1 class="title">about us</h1>
<hr class="line">
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page <br>avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années<br> 1500, quand un imprimeur
anonyme assembla </p>
</section>
<!-- service section -->
<section class="services">
<h1 class="title-service">
services
</h1>
<div class="quality-cuisine-box">
<i class="fas fa-concierge-bell icon qu"></i>
<h2 class="service-title">quality cuisine</h2>
<p class="service-description">Le Lorem Ipsum est <br>
simplement du faux
</p>
</div>
<!-- <div class="freindly-staff-box">
<i class="fas fa-smile-beam icon"></i>
<h2>freindly staff</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div>
<div class="fresh-food-box">
<i class="fas fa-fish icon"></i>
<h2>fresh food</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div> -->
<div class="service-image-box">
<img class="service-image" src="https://via.placeholder.com/1000" alt="">
</div>
</section>
this is an executable version of my code: https://codepen.io/AMeshu/pen/vvjgxg
A couple of problems on the fly:
You are using absolute sizes for position / measuring your elements. I changed the width property to max-width. Then in order to remove the scroll-x I set the body margin to 0.
.line – instead of left 650px I put right 0.
.main-nav__item - I don't know why, but you are using the unordered list element over and over. So I combine it to one, as you can see.
<style>
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body {
margin: 0;
}
/* Header section */
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100%;
font-weight: bold;
text-transform: uppercase;
}
.logo-box {
position: relative;
left: 10px;
}
.logo {
width: 100px;
}
.main-nav__item {
list-style-type: none;
}
.main-nav__item li {
float: left;
padding-right: 10px;
}
.main-nav__item li:hover {
color: #ff9900;
cursor: pointer;
}
/* 84.2 */ .slideshow-container {
max-width: 100vw;
position: relative;
margin: auto;
}
.img {
max-width: 100%;
height: 98vh;
}
.dotz {
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* //////////The end of the header/////////////////// */
/* Styling icons */.icon {
font-size: 2.5rem;
}
.ad {
margin-left: 80px;
margin-bottom: 3px
}
.rot {
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op {
margin-left: 3.12rem;
}
.contact-description {
text-align: center;
font-weight: bold;
font-size: 0.81rem;
} /* End styling icons */
/* contact-box title */.contact-title {
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* About us section*/.title {
text-align: center;
}
.title-description {
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover {
color: black;
}
.line {
position: relative;
right: 0px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* Service section */
.service-image-box {
width: 100%;
height: 50%;
}
.service-image {
max-width: 100%;
}
.title-service {
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box {
position: relative;
top: 10rem;
height: 0.1px;
/* left: 19rem; */
max-width: 1366px;
}
.hover:hover {
color: #ff9900;
}
.qu {
/* margin-left: 3rem; */
color: white;
}
.service-title {
color: white;
}
.service-description {
color: white;
}
</style>
Play with that pen and good luck!