I'm trying to build a random quote generator website and the quote container doesn't seem to be perfectly centered. You can notice that when resizing the page to a mobile device size. What line of code should I add to it to center it completely? I'll leave the snippet below so you can see for youself the issue. Many thanks in advance.
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: auto;
max-width: 900px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
}
.long-quote {
font-size: 2rem;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 1000px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>i tried it is now working. you will align it in the "qoute text" and the "long quote" and also you will have to change the with from auto to 500; check the amendment below:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: 200;
max-width: 700px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
text-align: center;
}
.long-quote {
font-size: 2rem;
text-align: center;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 800px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>