I made some grid CSS for the element inside the <div class="row"> element but somehow it is affected by my JS file. When I delete all the div column in HTML it turns to normal.
I want to keep my grid but still can use the button.
geeksportal("all")
function geeksportal(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current
// button (highlight it)
var btnContainer = document.getElementById("filtering");
var btns = btnContainer.getElementsByClassName("bttn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current =
document.getElementsByClassName("active");
current[0].className =
current[0].className.replace(" active", "");
this.className += " active";
});
}/* Wildcard styling */
* {
box-sizing: border-box;
}
/* Padding for whole body */
body {
padding: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: #e4c0f5;
}
/* Styling h2 tag */
h1 {
Color: rgb(240, 6, 135);
word-break: break-all;
font-style: oblique;
}
/* Anchor tag decoration */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
.container {
max-width: 1200px;
margin: auto;
}
.row {
margin: 0px -10px;
padding: 8px;
display: grid;
gap: 5px;
grid-template-areas: initial;
}
.Byyourside {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.Onlyyousheet {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.YourGroup {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.YourGroup1 {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.row>.column {
padding: 6px;
}
.content:hover {
filter: drop-shadow(4px 4px 60px gray);
transform: scale(1.01);
}
.column {
float: left;
width: 25%;
display: none;
}
/* Content decoration */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
transition: 0.5s;
border-radius: 10px;
}
/* Paragraph decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.row:after {
content: "";
display: table;
clear: both;
}
.show {
display: block;
}
/* Style the filter buttons */
.filtering {
text-align: center;
}
.bttn {
padding: 8px 14px;
background-color: gray;
border-radius: 10px;
}
.bttn:hover {
background-color: #007EE5;
opacity: 0.8;
}
.bttn.active {
background-color: #007EE5;
color: white;
`Z`
}
/* Window size 850 width set */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* Window size 400 width set */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
</head>
<body>
<!-- Title and tag -->
<div class="container">
<h1>Kiet Vu</h1>
<h3>Ailly's house photography</h3>
<hr>
<!-- Content of the body-->
<h2>Our services</h2>
<!-- Button foreach group -->
<div id="filtering">
<button class="bttn active" onclick="geeksportal('all')">
Show all
</button>
<button class="bttn" onclick="geeksportal('Byyourside')">
By your side
</button>
<button class="bttn" onclick="geeksportal('Onlyyou')">
Only you
</button>
<button class="bttn" onclick="geeksportal('YourGroup')">
Your Group
</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="Byyourside">
<div class="column Byyourside">
<div class="content">
<img src="IMAGE/nature/IMG20220815131449.jpg" alt="HTML" style="width:100%">
<h3>
<a href="#">
<br>
<br>
<br>
<br>
<br>
<br>
<HR> Nature
</a>
</h3>
<p>
Don't worry about missing your moment just make your trip accomplished while we are capturing the most beautiful moments of nature, and architecture around you.
</p>
</div>
</div>
</div>
<div class="Onlyyousheet">
<div class="column Onlyyousheet">
<div class="content">
<img src="IMAGE/_KIE8837.jpg" alt="CSS" style="width:100%">
<h3>
<a href="#">
<hr> Portrait
</a>
</h3>
<p>
Creating your best album so far with us. Ofcourse we also have a beautify-team following you to make sure you are always beautiful.
</p>
</div>
</div>
</div>
<div class="YourGroup">
<div class="column YourGroup">
<div class="content">
<img src="IMAGE/KIET5409.jpg" alt="" style="width:100%">
<h3>
<a href="#">
<HR> Yearbook
</a>
</h3>
<p>
Give us the most special time in your student life, you won't be disappointed.
</p>
</div>
</div>
</div>
<div class="YourGroup1">
<div class="column YourGroup1">
<div class="content">
<img src="IMAGE/KIET8675.jpg" alt="" style="width:100%">
<h3>
<a href="#">
<HR> Story teller
</a>
</h3>
<p>
With this choice, we will give you a table of content to choose which included the ideas, costume, locations, ...
</p>
</div>
</div>
</div>
</div>
</div>
<script src="java.js">
</script>
</body>
</html>