I'm trying to learn JavaScript + html + css and Python by myself and I'm practicing with a tab layout using divs with p elements inside working as a tab (I know that I can do it with buttons, but I'm proving myself that it can be done with p)
I made JavaScript code to when is clicked the div of every tab in the layout came upfront a div with content related to that tab, but when I click it, lost every style that I made in an external CSS stylesheet and I don't know the reason for that.
This is the html
function toggleMe(e, contenedor) {
var a = document.getElementsByClassName("cont");
var i;
for(i=0;i<a.length;i++) {
a[i].style.display = "none";
}
document.getElementById(contenedor).style.display = "block";
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>
It looks like initially your cont class DIVs are set as display: flex but when making them visible again in JavaScript you set them as display: block.
You should change the JavaScript to something like this:
document.getElementById(contenedor).style.display = "flex";
Avoid manipulating styles in JS. Toggle a class and leave the styles to the CSS:
function toggleMe(e, contenedor) {
for (let item of document.querySelectorAll(".cont")) {
item.classList.toggle("active", item.id === contenedor);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
.cont.active {
display: flex;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>
Related
I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>
I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (scroll) {
scroll.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 500vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!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>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
</body>
</html>
The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.
See modified CSS code below:
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
html, body {
overflow: hidden;
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 100vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!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>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
What is the best way to code it so it automatically plays the next video when the current video ends? I've tried storing the videos into an array and increment it so the next video plays but there's an error if the user clicks on any video and waits for the next.
The code can be found here: https://drive.google.com/file/d/14RUUuKRl4xc-XWIvKN0w0h1JY7F3T8mI/view
<!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">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main-video-container">
<video src="images/vid-1.mp4" loop controls class="main-video"></video>
<h3 class="main-vid-title">house flood animation</h3>
</div>
<div class="video-list-container">
<div class="list active">
<video src="images/vid-1.mp4" class="list-video"></video>
<h3 class="list-title">house flood animation</h3>
</div>
<div class="list">
<video src="images/vid-2.mp4" class="list-video"></video>
<h3 class="list-title">zombie walking animation</h3>
</div>
<div class="list">
<video src="images/vid-3.mp4" class="list-video"></video>
<h3 class="list-title">emoji falling animation</h3>
</div>
<div class="list">
<video src="images/vid-4.mp4" class="list-video"></video>
<h3 class="list-title">3D town animation</h3>
</div>
<div class="list">
<video src="images/vid-5.mp4" class="list-video"></video>
<h3 class="list-title">man chasing carrot animation</h3>
</div>
<div class="list">
<video src="images/vid-6.mp4" class="list-video"></video>
<h3 class="list-title">door hinge animation</h3>
</div>
<div class="list">
<video src="images/vid-7.mp4" class="list-video"></video>
<h3 class="list-title">people walking in town animation</h3>
</div>
<div class="list">
<video src="images/vid-8.mp4" class="list-video"></video>
<h3 class="list-title">knight chasing virus animation</h3>
</div>
<div class="list">
<video src="images/vid-9.mp4" class="list-video"></video>
<h3 class="list-title">3D helicopter animation</h3>
</div>
</div>
</div>
<!-- custom js file link -->
<script src="script.js"></script>
</body>
</html>
let videoList = document.querySelectorAll('.video-list-container .list');
videoList.forEach(vid =>{
vid.onclick = () =>{
videoList.forEach(remove =>{remove.classList.remove('active')});
vid.classList.add('active');
let src = vid.querySelector('.list-video').src;
let title = vid.querySelector('.list-title').innerHTML;
document.querySelector('.main-video-container .main-video').src = src;
document.querySelector('.main-video-container .main-video').play();
document.querySelector('.main-video-container .main-vid-title').innerHTML = title;
};
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
}
body{
background-color: coral;
padding:20px;
}
.container{
max-width: 1200px;
margin:100px auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap:20px;
}
.container .main-video-container{
flex:1 1 700px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
background-color: #fff;
padding:15px;
}
.container .main-video-container .main-video{
margin-bottom: 7px;
border-radius: 5px;
width: 100%;
}
.container .main-video-container .main-vid-title{
font-size: 20px;
color:#444;
}
.container .video-list-container{
flex:1 1 350px;
height: 485px;
overflow-y: scroll;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
background-color: #fff;
padding:15px;
}
.container .video-list-container::-webkit-scrollbar{
width: 10px;
}
.container .video-list-container::-webkit-scrollbar-track{
background-color: #fff;
border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb{
background-color: #444;
border-radius: 5px;
}
.container .video-list-container .list{
display: flex;
align-items: center;
gap:15px;
padding:10px;
background-color: #eee;
cursor: pointer;
border-radius: 5px;
margin-bottom: 10px;
}
.container .video-list-container .list:last-child{
margin-bottom: 0;
}
.container .video-list-container .list.active{
background-color: #444;
}
.container .video-list-container .list.active .list-title{
color:#fff;
}
.container .video-list-container .list .list-video{
width: 100px;
border-radius: 5px;
}
.container .video-list-container .list .list-title{
font-size: 17px;
color:#444;
}
#media (max-width:1200px){
.container{
margin:0;
}
}
#media (max-width:450px){
.container .main-video-container .main-vid-title{
font-size: 15px;
text-align: center;
}
.container .video-list-container .list{
flex-flow: column;
gap:10px;
}
.container .video-list-container .list .list-video{
width: 100%;
}
.container .video-list-container .list .list-title{
font-size: 15px;
text-align: center;
}
}
The website mobile version looks like this:desktop mobile view
But on my phone it looks like this: phone view
I make use of box-sizing, still don’t know why it’s having different scaling
Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!
If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).
Obviously you will want to set the vw amount to suit your particular requirement.
This snippet sets it to 10vw for this demo.
However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
#media screen and (max-width:992px) {
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
}
</style>
<!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>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="kill">
<nav class="navbar navbar-expand-sm navbar-dark nipp navi">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-whatsapp h2"></i> Whatsapp
</a>
<div class="rell">
<button class="rate text-light h2"> <i class="bi bi-search"></i></button>
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="rounded-circle w-25">
</div>
</div>
</nav>
<section>
<div class="container pt-4">
<div class="mage1">
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mage ms-3 " alt="">
<h6 class="mt-2 txt">You</h6>
<button class="butn"> <i class="bi bi-plus-circle-fill"></i></button>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/18.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/14.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.
I wanna use the same navbar and footer across multiple pages, using the JQuery, as we can see here. However, I want a responsive navbar (see the hamburger menu at the corner). So, to do that, I had to load these tags from files. Unfortunately, the script doesn't work anymore. How can I fix it?
[EDIT] Everything works fine by replacing <div id="nav-placeholder"></div> with the content of nav.html, but I would like to keep the code distributed. The console returns the following error:
Uncaught TypeError: toggleButton is null
<anonymous> file:///home/myProject/script.js:3
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dummy website</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="nav-placeholder"></div>
</header>
<main>
<p>home content</p>
</main>
<footer>
<div id="footer-placeholder"></div>
</footer>
<script src="script.js"></script>
</body>
</html>
nav.html
<p>logo</p>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
<nav class="nav-links" id="nav-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
footer.html
<p>footer content</p>
style.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
color: white;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: green;
}
.nav-links {
list-style: none;
}
.nav-links li {
display: inline-block;
text-align: center;
padding-right: 5px;
}
.menu {
display: none;
cursor: pointer;
}
.menu-line {
background-color: white;
width: 21px;
height: 2px;
margin-top: 5px;
}
main {
height: 200px;
}
main p{
color: black;
}
footer {
background-color: red;
}
#media all and (max-width: 480px){
.menu {
display: block;
}
.nav-links {
display: none;
width: 100%;
}
.active {
display: flex;
}
.nav-links ul{
justify-content: center;
width: 100%;
}
.nav-links li {
display: block;
border-top: 1px solid white;
padding: 5px 0 5px 0;
}
}
script.js
const toggleButton = document.getElementById('toggleButton');
const navList = document.getElementById('nav-list');
toggleButton.addEventListener('click', () => {
navList.classList.toggle('active');
});
$(function(){
$("#nav-placeholder").load("nav.html");
$("#footer-placeholder").load("footer.html");
});