1
When using the Display: none to exclude the h2 (containing the title) in @media, it ends up deleting the options present in the menu, even being the h2 belonging to the id: navbar and the menu to id: navbar-list. In short, I want to take the h2 without losing the navbar-list to make the site more pleasant on smartphones using the @media, with max-width:450px or similar... I ran the tests by Chrome itself.
Follow full html and css codes.
/*Reset*/
body,
p,
h1,
h2,
input,
textarea {
margin: 0;
font-family: 'Roboto', sans-serif;
}
h2 {
font-size: 30px;
}
/*navbar*/
#navbar {
background-color: #000000;
color: white;
padding: 0 15px;
height: 85px;
}
#navbar h2,
#navbar ul,
#navbar-list li {
display: inline-block;
}
#navbar h2 {
margin: 0;
line-height: 80px;
margin-left: 110px;
color: #ac0582;
}
#navbar img {
position: absolute;
transform: translateY(-10%);
margin-top: 10px;
}
#navbar ul {
float: right;
margin-top: 25px;
transform: translateY(-400%);
}
#navbar li {
margin: 0 15px;
}
#navbar-list li a {
text-decoration: none;
color: rgb(255, 255, 255);
}
#navbar-list li a:hover {
border-bottom: 1.5px solid white;
}
/*Fim navbar*/
/*Banner*/
#main-banner {
height: 80vh;
background-image: url('Imgs/p3.jpg');
background-size: cover;
padding-top: 18vh;
}
#banner-infos {
width: 40%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: white;
}
#banner-infos img {
height: 200px;
border-radius: 22%;
background-color: #000000;
margin-top: 30px;
margin-bottom: 30px;
}
#banner-infos p {
background-color: #000000;
font-weight: bold;
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
/*Fim Banner*/
/*About*/
#about-section {
text-align: center;
background-color: #000000;
color: white;
padding-top: 50px;
height: 350px;
}
#about-section h2 {
margin-bottom: 25px;
}
#about-section p {
max-width: 650px;
margin-right: auto;
margin-left: auto;
line-height: 30px;
}
/*About*/
/*Skills*/
#skills-section {
margin-top: -100px;
background-color: white;
width: 85%;
margin-right: auto;
margin-left: auto;
border: 1.7px solid rgb(212, 212, 212);
border-radius: 10px;
}
#skills-section .container {
display: flex;
flex-direction: row;
justify-content: center;
}
.skills-container {
flex: 1 1 1;
text-align: center;
padding: 60px 25px;
;
}
.central {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.skills-container h3 {
color: #000000;
font-size: 20px;
}
.skills-container img {
height: 105px;
padding: 15px;
margin-bottom: 20px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 3px solid #000000;
border-right: 5.5px solid #000000;
}
.skills-container .subtitle {
font-weight: bold;
color: #000000;
margin-top: 50px;
margin-bottom: 15px;
}
.skills-container p {
line-height: 25px;
}
/*Fim Skills*/
/*Products*/
#products-section {
text-align: center;
padding-top: 50px;
}
#products-section h2 {
color: #000000;
margin-bottom: 40px;
}
#products-section p {
margin-bottom: 40px;
}
#products-section a {
font-weight: bold;
color: rgb(220 151 19);
}
.product-container {
display: flex;
flex-direction: row;
justify-content: space-around;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.product-box {
flex: 1 1 200px;
margin-left: 25px;
margin-right: 25px;
height: 300px;
background-size: cover;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
.pr1 {
background-image: url('Imgs/p1.jpg');
}
.pr2 {
background-image: url('Imgs/p2.jpg');
}
.pr3 {
background-image: url('Imgs/p6.jpg');
}
/*Fim Products*/
/*Footer*/
footer {
padding: 50px 0;
background-color: #000000;
color: white;
text-align: center;
}
footer img {
height: 50px;
margin: 30px 0;
}
footer p {
margin-top: 30px;
}
footer form {
width: 400px;
margin-right: auto;
margin-left: auto;
}
footer input,
footer textarea {
border: none;
padding: 15px;
box-sizing: border-box;
margin-bottom: 20px;
width: 100%;
display: block;
}
footer .desenvolvedor {
font-weight: bold;
}
/*Fim Footer*/
/*Responsivo para smartphone*/
@media (max-width:450px) {
p,
input,
textarea,
#navbar-list li a {
font-size: 1.2rem;
}
#navbar h2 {
/*visibility: hidden;*/
display: none;
}
#navbar ul {
margin-top: 1.1rem;
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>The Gallery Art - XXI</title>
<meta charset="UTF-8" />
<meta name="viewport" content="widht=device-widht, initial-scale=1.0" />
<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@300;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="Estilo.css" />
</head>
<body>
<!--Navbar-->
<header id="navbar">
<img src="Imgs/Logo.png" alt="#" />
<h2>Esse texto tem que sumir no smartphone</h2>
<nav>
<ul id="navbar-list">
<!--Essas três opções tem que continuar-->
<li><a href="##">Sobre</a></li>
<li><a href="##">Conteúdo</a></li>
<li><a href="##">Contato</a></li>
</ul>
</nav>
</header>
<!--Fim Navbar-->
<main>
<!--Banner-->
<div id="main-banner">
<div id="banner-infos">
<h1>X X I</h1>
<img src="Imgs/Logo.png" alt="#" />
<p>
The risk of a wrong decision is preferable to the terror of
indecision....
</p>
</div>
</div>
<!--Fim Banner-->
<!--About-->
<section id="about-section">
<h2>The 21st Century Digital Art Revolution</h2>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced
below for those interested. Sections 1.10.32 and 1.10.33 from "de
Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914
translation by H. Rackham.
</p>
</section>
<!--Fim About-->
</main>
<!--Skills-->
<section id="skills-section">
<div class="container">
<div class="skills-container">
<img src="Imgs/1.png" alt="Img1" />
<h3>Teste</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
<p class="subtitle">Zeus</p>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</p>
<p class="subtitle">Hera</p>
<p>There are many variations of passages of Lorem Ipsum available.</p>
</div>
<div class="skills-container">
<img src="Imgs/2.png" alt="Img2" />
<h3>The Concept</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="subtitle">Poseidon</p>
<p>
Curabitur urna leo, malesuada at dolor et, interdum convallis
lectus.
</p>
<p class="subtitle">Atena</p>
<p>Ut aliquam facilisis nibh vitae convallis.</p>
</div>
<div class="skills-container">
<img src="Imgs/3.png" alt="Img3" />
<h3>The Purpouse</h3>
<p>Ut vulputate neque ut lacus suscipit ullamcorper</p>
<p class="subtitle">Ares</p>
<p>Ut nunc mi, pharetra eu eleifend vitae, gravida ac lacus.</p>
<p class="subtitle">Apolo</p>
<p>Nulla interdum lectus quam, malesuada luctus ex viverra eu.</p>
</div>
</div>
</section>
<!--Fim Skills-->
<!--Products-->
<section id="products-section">
<h2>Artwork of the week</h2>
<p>
Check out some of the featured artworks, or click
<a href="#">here</a> and see them all.
</p>
<div class="product-container">
<div class="product-box pr1"></div>
<div class="product-box pr2"></div>
<div class="product-box pr3"></div>
</div>
<div class="product-container">
<div class="product-box pr2"></div>
<div class="product-box pr3"></div>
<div class="product-box pr1"></div>
</div>
</section>
<!--Fim Products-->
<!--Footer-->
<footer>
<h2>Contact</h2>
<p>We await your message :)</p>
<img src="Imgs/Logo.png" alt="#" />
<form action="" method="">
<input type="text" name="name" placeholder="Name" />
<!--INPUT PARA NUM DE TELEFONE-->
<input type="tel" name="number" placeholder="Number" />
<textarea name="msg" placeholder="Message"></textarea>
<input type="submit" value="Done!" />
</form>
<p>Developer <span class="desenvolvedor">Gustavo Lopes - 2021</span></p>
</footer>
<!--Fim Footer-->
</body>
</html>
The menu is not being hidden. It’s being moved down (because it doesn’t fit in the width of the screen) and staying over the white area, and with that it’s unseen because it’s white too, but it’s there.
– Sam
Thank you so much for the answer! I noticed that too
– Gustavo Lopes