So I made two buttons in a grid, and in order for them to sit closer to each other I use justify-self: start and justify-self: end to the buttons. Everything works just fine until I made a media queries. These two buttons won't center themselves even though I have set them to center.
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
--color-1: #ff8787;
--color-2: #475569;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
color: var(--color-2);
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--color-2);
}
h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
/* Navbar */
.navbar {
background-color: var(--color-1);
height: 70px;
}
.navbar .flex {
justify-content: space-between;
}
.nav-middle {
display: flex;
flex-direction: row;
gap: 1rem;
text-align: left;
}
.nav-middle a:hover {
text-decoration: underline;
}
.nav-right {
display: flex;
flex-direction: row;
gap: 1rem;
}
.login {
font-size: 1.1rem;
}
.menu-sub {
position: absolute;
width: fit-content;
display: none;
background: #ddd;
color: var(--color-2);
z-index: 1;
}
.nav-middle li:hover .menu-sub,
.nav-middle li:active .menu-sub {
display: block;
overflow: auto;
}
.menu-sub a {
padding: 0;
margin-bottom: 0.35em;
}
.menu-sub a:hover {
text-decoration: underline;
}
.menu-category {
margin: 2.5rem 0 0.5em;
}
.menu-category:first-of-type {
margin-top: 0;
}
.menu-col-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.menu-sub-left {
background-color: #7950f2;
padding: 1rem 1rem;
}
.menu-sub ul {
padding: 1rem 1rem;
}
/* Showcase */
.showcase {
height: 400px;
background-color: var(--color-1);
columns: var(--color-2);
position: relative;
}
.showcase h1 {
font-weight: 500;
margin-top: 3rem;
}
.showcase p {
margin: 1.5rem 0;
}
.showcase .grid div {
display: grid;
}
.showcase .grid div:first-of-type a {
justify-self: end;
}
.showcase .grid div:nth-of-type(2) a {
justify-self: start;
}
/* Utilities */
/* Text sizes */
.lead {
font-size: 20px;
}
.sm {
font-size: 1rem;
}
.mdm {
font-size: 2rem;
}
.lg {
font-size: 3rem;
}
.xl {
font-size: 4rem;
}
.text-center {
text-align: center;
}
/* margin */
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 1.5rem 0;
}
.my-3 {
margin: 2rem 0;
}
.my-4 {
margin: 3rem 0;
}
.my-5 {
margin: 4rem 0;
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 1.5rem;
}
.m-3 {
margin: 2rem;
}
.m-4 {
margin: 3rem;
}
.m-5 {
margin: 4rem;
}
/* padding */
.py-1 {
padding: 1rem 0;
}
.py-2 {
padding: 1.5rem 0;
}
.py-3 {
padding: 2rem 0;
}
.py-4 {
padding: 3rem 0;
}
.py-5 {
padding: 4rem 0;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 1.5rem;
}
.p-3 {
padding: 2rem;
}
.p-4 {
padding: 3rem;
}
.p-5 {
padding: 4rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
overflow: auto;
}
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: #845ef7;
color: var(--color-2);
border: none;
border-radius: 5px;
transition: all 0.5s;
}
.btn:hover {
background-color: #7950f2;
}
.btn-outline {
background-color: #ff8787;
border: 1px solid var(--color-2);
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.123);
margin: 10px;
padding: 20px;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* Media queries */
/* Tablets and Under */
@media (max-width: 768px) {
.showcase {
height: auto;
}
.grid,
.showcase .grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.showcase .grid a {
justify-self: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="utilities.css" />
<link rel="stylesheet" href="style.css" />
<title>Just Project 1</title>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="container flex">
<h1 class="logo">AcademyOfCode</h1>
<nav>
<ul class="nav-middle">
<li>
<a href="#"
>Catalog <ion-icon name="caret-down-outline"></ion-icon
></a>
<div class="menu-sub">
<div class="menu-col-1">
<div class="menu-sub-left">
<h3 class="menu-category">Course recommendations</h3>
<p>Explore our paid or free courses</p>
</div>
<ul>
<li><a href="">Python</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">Html</a></li>
<li><a href="">CSS</a></li>
<li><a href="">SQL</a></li>
</ul>
<ul>
<li><a href="">C++</a></li>
<li><a href="">Java</a></li>
<li><a href="">PHP</a></li>
<li><a href="">C#</a></li>
<li><a href="">R</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#"
>Pricing <ion-icon name="caret-down-outline"></ion-icon
></a>
<div class="menu-sub">
<div>
<ul>
<li><a href="">For students</a></li>
<li><a href="">For individuals</a></li>
<li><a href="">For teams</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#"
>Community <ion-icon name="caret-down-outline"></ion-icon
></a>
<div class="menu-sub">
<div>
<ul>
<li><a href="">Discord</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">YouTube</a></li>
<li><a href="">Github</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<nav>
<ul class="nav-right">
<li>
<a class="btn btn-outline" href="#">Login</a>
</li>
<li><a class="btn" href="#">Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<!-- Showcase -->
<section class="showcase">
<div class="container">
<div class="showcase-text text-center">
<h1 class="xl">AcademyOfCode empowers you to build tech fluency</h1>
<p class="mdm">Build your tech skill here with CodeOfAcademy</p>
<div class="grid">
<div>
<a href="#" class="btn btn-primary">Get Started</a>
</div>
<div>
<a href="#" class="btn btn-outline">Learn to Code</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I want these two buttons be on the center in media queries. I have tried using justify-self: center, but it didn't work.
The issue in your code is you are trying to apply justify-self: center
to the a
tags directly, while it should be applied to grid items directly. Also, you have wrapped the buttons inside a div which is a grid item.
Tweak your media query as follows and confirm it works:
@media (max-width: 768px) {
.showcase {
height: auto;
}
.grid,
.showcase .grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.showcase .grid div {
justify-self: center;
}
}
Here, we adjust the grid-template-columns
and grid-template-rows
to 1fr
and auto auto
, respectively, to ensure each button container takes full width and aligns in the center.We also apply justify-self: center
to the div
containers within the grid to center align the buttons within those containers.