With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar
The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
Related
So, i am doing this frontend mentor challenge. I have done the mobile first design. My problem is how do i get my navbar to be like this . I have tried using display flex with flex direction row but the mobile design navbar is not changing its shape and size.
My code is producing the navbar like this
Can anyone please tell me what i am doing wrong in the media query that i am not getting the output i desire.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<script src="https://kit.fontawesome.com/572b4fce3c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
</head>
<body>
<main>
<section class="header">
<!-------- Header Section -------->
<nav>
<img src="/images/logo.svg" alt="logo"></a>
<div class="nav-links" id="navLinks">
<!-- <i class="fa fa-solid fa-xmark"></i> -->
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Resources</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showHideMenu()"></i>
</nav>
<img class='illustration' src="/images/illustration-working.svg" alt="illustration">
<div class="first-section-content">
<h1>More than just <span class="short">shorter links</span></h1>
<p>Build your brand's recognition and get detailed insights on how your links are
performing.</p>
<button class="get-started">Get Started</button>
</div>
</section>
<!-- URL shortening -->
<article class="shorten-details">
<section class="shorten">
<div class="shorten-link">
<input type="text" placeholder="Shorten a link here....">
</div>
<span class="error-msg">Please add a link</span>
<button class="short-it">Shorten It!</button>
</section>
</article>
<!-- URL Copy -->
<article class="url-copy">
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<!-- <div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section> -->
<section class="advanced-stats">
<h2>Advanced Statistics</h2>
<p class="perform">Track how your links are performing across the web with our advanced statistics
dashboard.</p>
<div class="stats">
<div class="stat">
<img class="brand-img" src="/images/icon-brand-recognition.svg" alt="brand-recognition">
<h3>Brand Recognition</h3>
<p class="stat-desc">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</ class="boost">
</div>
<div class="stat-1">
<img class="brand-img" src="/images/icon-detailed-records.svg" alt="detailed-records">
<h3>Detailed Records</h3>
<p class="stat-desc">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="stat-2">
<img class="brand-img" src="/images/icon-fully-customizable.svg" alt="fully-customizable">
<h3>Fully Customizable</h3>
<p class="stat-desc">Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.</p>
</div>
</div>
</section>
</article>
<article class="boost-links">
<section class="boost">
<h2>Boost your links today</h2>
<button class="get-started-2">Get Started</button>
</section>
</article>
<article class="last-footer">
<section class="footer">
<div class="footer-links">
<div class="footer-link">
<h2>Shortly</h2>
<h3>Features</h3>
<ul>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
</div>
<div class="footer-link">
<h3>Resources</h3>
<ul>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
</div>
<div class="footer-link">
<h3>Company</h3>
<ul>
<li>About</li>
<li>Our Team</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="socials">
<div class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</section>
</article>
</main>
<script src="script.js"></script>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Nelson Uprety.
</div>
</body>
</html>
CSS code for the header / navbar part:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;700&display=swap');
#import url('css-reset.css');
:root {
--color-cyan: hsl(180, 66%, 49%);
--color-dark-violet: hsl(257, 27%, 26%);
--color-red: hsl(0, 87%, 67%);
--color-gray: hsl(0, 0%, 75%);
--color-grayish-violet: hsl(257, 7%, 63%);
--color-grayish-violet-op: hsl(257, 7%, 63%, 0.3);
--color-very-dark-blue: hsl(255, 11%, 22%);
--color-very-dark-violet: hsl(260, 8%, 14%);
--color-second-bg: hsl(230, 25%, 95%);
--color-white: hsl(0, 0%, 100%);
--font-weight-five: 500;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
}
main {
overflow: hidden;
/* border: 1px solid green; */
max-width: 390px;
height: auto;
margin: 0 auto;
}
/* -------Header Section--------- */
.header {
display: flex;
flex-direction: column;
padding: 30px;
max-width: 350px;
}
.nav {
display: flex;
position: relative;
}
.nav-links {
background-color: var(--color-dark-violet);
width: 330px;
height: 370px;
border-radius: 10px;
position: absolute;
z-index: 2;
transition: 0.3s;
top: 100px;
right: 63px;
visibility: hidden;
}
nav .fa {
display: block;
color: var(--color-grayish-violet);
font-size: 30px;
cursor: pointer;
right: 63px;
top: 30px;
position: absolute;
}
.nav-links ul li {
list-style: none;
padding: 14px;
text-align: center;
display: block;
}
.nav-links ul li a {
text-decoration: none;
color: var(--color-white);
font-weight: var(--font-weight-seven);
font-size: 1.2rem;
padding: 10px 100px;
border-radius: 25px;
}
.nav-links ul li a:hover {
background-color: var(--color-cyan);
color: var(--color-white);
}
.nav-links ul li:nth-child(3) {
border-bottom: 1px solid var(--color-grayish-violet-op);
padding-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.illustration {
position: relative;
right: -50px;
transform: scale(1.6);
margin-top: 100px;
right: -90px;
z-index: 1;
display: block;
}
.first-section-content {
margin-top: 100px;
transition: 0.3s;
}
.first-section-content.menu-open {
margin-top: 130px;
transition: 0.3s;
}
.first-section-content h1 {
font-size: 2.67rem;
font-weight: var(--font-weight-seven);
color: var(--color-very-dark-blue);
margin-bottom: 20px;
margin-left: 9px;
width: 350px;
line-height: 1.2;
}
.short {
margin-left: 15px;
}
.first-section-content p {
font-size: 1rem;
color: var(--color-grayish-violet);
font-weight: var(--font-weight-five);
margin-bottom: 35px;
margin-left: 6px;
width: 350px;
line-height: 2;
letter-spacing: 0.7px;
overflow: hidden;
}
.get-started {
background-color: var(--color-cyan);
color: var(--color-white);
border: none;
padding: 14px;
font-weight: var(--font-weight-seven);
width: 190px;
border-radius: 30px;
cursor: pointer;
margin-left: 70px;
}
#media (min-width:768px) {
body {
overflow-y: scroll;
min-height: 100vh;
overflow-x: hidden;
}
main {
height: 100vh;
max-width: 100%;
overflow: scroll;
}
.header {
display: flex;
/* align-items: center; */
/* flex-direction: row; */
width: 100%;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.3rem;
padding: 2.9rem 9.2rem;
position: relative;
}
.nav-links {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.nav-links ul li {}
.nav-links ul li a {
display: flex;
display: inline;
flex-direction: row;
background-color: transparent;
visibility: visible;
color: var(--color-gray);
}
nav .fa {
display: none;
}
}
display: flex; needs to be on the ul inside the .nav-links div - that ul is the element which contains the navigation items.
I’m currently working on a project from Frontend mentor, while developing the mobile version an issue arose where the main section is overflowing onto the footer section.
:root {
--DarkViolet: hsl(256, 26%, 20%);
--Grayish-Blue: hsl(216, 30%, 68%);
--VeryLight-Gray: hsl(0, 0%, 98%);
--Dark-Grayish-Violet: hsl(273, 4%, 51%);
--Very-Dark-Violet: hsl(270, 9%, 17%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.hide {
display: none;
}
.content-container {
width: 100%;
padding: 10px 0;
margin: auto;
}
main {
border: 10px dashed red;
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.purple {
background-color: var(--DarkViolet);
color: #fff;
}
button {
background-color: var(--DarkViolet);
color: #fff;
border: 2px solid;
padding: 5px 20px;
font-size: .8em;
width: 200px;
}
#media only screen and (min-width: 214px) {
* {
overflow-x: hidden;
}
.content-container {
width: 90%;
}
header {
position: fixed;
background-color: white;
width: 100%;
z-index: 15;
}
header .flex {
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
header>* {
padding: 20px;
justify-content: space-between;
}
.menu {
position: fixed;
top: 0;
right: 0;
margin-top: 60px;
background-color: var(--Very-Dark-Violet);
padding: 50px 0;
text-align: center;
height: 100%;
width: 100%;
transform: translateY(-800px);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.menu img {
width: inherit;
position: absolute;
right: 0;
bottom: 0;
}
.menu.open {
overflow: hidden;
opacity: 1;
font-size: 1.3em;
transform: translateY(0px);
transition: all 0.5s ease-in-out;
background-image: url(images/bg-pattern-mobile-nav.svg);
background-position: bottom;
background-repeat: no-repeat;
}
.menu .navLinks {
border: 1px solid gray;
display: block;
list-style: none;
background-color: inherit;
color: #000;
}
.menu .navLinks li {
color: white;
margin: auto;
margin-bottom: 40px;
margin-left: 0;
width: 100%;
}
.menu .navLinks li a {
color: white;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.menu .navLinks button {
width: 80%;
font-size: 1.2em;
text-transform: uppercase;
}
main {
transform: translateY(70px);
}
.mobile-intro-img {
width: 100%;
object-fit: fill;
margin-bottom: 0;
}
.purple-big-banner {
border: 3px solid red;
margin: 0;
background-color: var( --Very-Dark-Violet);
color: white;
position: relative;
overflow: hidden;
background-image: url(images/bg-pattern-intro-left-mobile.svg);
background-repeat: no-repeat;
}
.purple-big-banner .mobile-intro-img-left {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.purple-big-banner .mobile-intro-img-right {
position: absolute;
bottom: -50%;
z-index: 100;
right: 0;
}
.purple-big-banner .content-container {
border: 3px dashed white;
}
.purple-big-banner .content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
gap: 2em;
margin: auto;
padding-top: 60px;
padding-bottom: 60px;
border: 1px solid red;
}
.purple-big-banner button {
margin: auto;
width: 60%;
}
.content-container>.mobile-intro-img-right-continued {
position: absolute;
top: 35%;
right: 0;
}
h1 {
overflow: hidden;
text-align: center;
font-size: 2em;
line-height: .85;
font-family: 'DM Serif Display', serif;
}
.purple-big-banner p {
line-height: 1.4em;
margin: 10px 0;
font-size: 1.1em;
}
hr {
width: 100px;
margin: auto;
margin-top: 40px;
margin-bottom: 20px;
}
.flex {
flex-direction: column;
margin-top: 40px;
align-items: center;
justify-content: center;
}
.box {
margin-bottom: 40px;
border: 1px solid rgb(31, 31, 31);
}
.box img {
padding: auto;
border: 1px solid red;
}
.box>* {
margin-bottom: 20px;
text-align: center;
}
.box p {
color: var(--Grayish-Blue);
}
.small-banner {
border: 5px solid red;
text-align: center;
background-image: url(images/bg-pattern-how-we-work-mobile.svg);
background-color: var( --Very-Dark-Violet);
color: white;
}
.small-banner .content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 0;
}
.small-banner button {
margin: auto;
width: 65%;
}
footer {
background-color: var(--VeryLight-Gray);
background-image: url(images/bg-pattern-footer-mobile.svg);
background-repeat: no-repeat;
border: 3px solid blue;
}
}
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<header>
<div class="content-container flex">
<img src="images/logo.svg" alt="" srcset="">
<nav class="menu">
<ul class="navLinks">
<li><a class="menuItem" href="#">How we work</a></li>
<li><a class="menuItem" href="#">Blog</a></li>
<li><a class="menuItem" href="#">Account</a></li>
<li><button class="menuItem">View plans</button></li>
</ul>
</nav>
<div class="hamburger ">
<img class="menuIcon" src="images/icon-hamburger.svg " alt="">
<img class="closeIcon hide" src="images/icon-close.svg" alt="">
</div>
</div>
</header>
<main class="flex-main">
<img src="images/image-intro-mobile.jpg" alt="" class="mobile-intro-img-left">
<div class="purple-big-banner">
<div class="content-container">
<div class="content">
<hr class="hide">
<div>
<h1> Humanizing your insurance.</h1>
</div>
<div>
<p>
Get your life insurance coverage easier and faster. We blend our expertise blank and technology to help you find the plan that’s right for you. Ensure you and your loved ones are protected.
</p>
</div>
<div>
<button class="upper">View plans</button>
</div>
</div>
</div>
<img src="images/bg-pattern-intro-right-desktop.svg" class="pattern-right hide" alt="" srcset="">
<img src="images/bg-pattern-intro-left-desktop.svg" class="pattern-left hide" alt="" srcset="">
</div>
<div class="content-container">
<img src="images/bg-pattern-intro-right-mobile.svg" alt="" class="mobile-intro-img-right-continued">
<div class="content">
<hr>
<h1>We’re different</h1>
<div class="flex">
<div class="box">
<div>
<img src="images/icon-snappy-process.svg" alt="">
</div>
<h2>Snappy Process</h2>
<p> Our application process can be completed in minutes, not hours. Don’t get stuck filling in tedious forms.</p>
</div>
<div class="box">
<div>
<img src="images/icon-affordable-prices.svg" alt="">
</div>
<h2> Affordable Prices</h2>
<p> We don’t want you worrying about high monthly costs. Our prices may be low, but we still offer the best coverage possible.</p>
</div>
<div class="box">
<div>
<img src="images/icon-people-first.svg" alt="">
</div>
<h2>People First</h2>
<p> Our plans aren’t full of conditions and clauses to prevent payouts. We make sure you’re covered when you need it.</p>
</div>
</div>
</div>
</div>
<div class="content-container small-banner">
<div class="content">
<div>
<h2>Find out more <br> about how we work</h2>
</div>
<button class="upper">How we work</button>
</div>
</div>
</main>
<footer>
<div class="footer-top">
<div class="content-container flex">
<div class="logo">
<img src="images/logo.svg" alt="" srcset="">
</div>
<div class="flex social">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-pinterest"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
</div>
</div>
<hr class="content-container">
</div>
<div class="footer-bottom content-container flex">
<div>
<p class="title upper">Our company</p>
<ul>
<li>How we work</li>
<li>Why Insure?</li>
<li>View plans</li>
<li>Reviews</li>
</ul>
</div>
<div>
<p class="title upper">Help me</p>
<ul>
<li>FAQ</li>
<li>Terms of use</li>
<li>Privacy policy</li>
<li>Cookies</li>
</ul>
</div>
<div>
<p class="title upper">Contact</p>
<ul>
<li>Sales</li>
<li>Support</li>
<li>Live chat</li>
</ul>
</div>
<div>
<p class="title upper">Others</p>
<ul>
<li>Careers</li>
<li>Press</li>
<li>Licenses</li>
</ul>
</div>
<div></div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
It seems like this is probably your issue:
main {
transform: translateY(70px);
}
I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
For my webpage, I want three inline images, with my logo below and a horizontal menu below and that is it, but it won't let me center it all. Can anyone help me? Here's my code:
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
Just to reiterate, what I'm trying to do is have on the top center three images that are aligned (each image is 320px).
Below, trying to have my logo.
And right below it, a small menu.
Nothing to fancy, really. Thanks for the read.
Simply add justify-content:center; to the .row class. See my example below of it working
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
justify-content:center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
justify-content:center;
display: flex;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
I change a few lines from your css code:
Removed max-width property from column class.
Removed display: block; from li a class.
Modified ul and li styles with custom id="horizontal-list".
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width: 100%;" />
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor" />
</div>
<div class="menu">
<ul id="horizontal-list">
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
li a {
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
#horizontal-list li {
display: inline;
}
.menu {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
Hope this helps you.