Estoy utilizando una imagen con las dimensiones 1980 x 780 estableciéndola como background y desde el CSS la achico y coloco un alto máximo. Dentro de la imagen coloqué un buscador, debajo de ella una línea de texto y un botón. Al momento de querer testear su desempeño responsive me encuentro con qué los elementos se desbordan al igual que una línea inferior como margen. Estos mismos no siguen el estilo inicial que me gustaría respetar.
Estoy repitiendo el mismo error que consulté en otra ocasión. Traté de no repetir en esta ocasión esa misma línea de código qué impedía que la imagen y su contenido estuvieran juntos pero algo se me debe haber pasado y no encuentro su fallo.
Esta línea la elimine pero algo más se me paso creo.
- background-position: center center;
@import url('https://fonts.googleapis.com/css2? family=Roboto:wght@700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
font-weight: 550;
min-height: 100%;
background-color: #141414;
}
/* ------------- SCROLLBAR ------------- */
body::-webkit-scrollbar {
height: 1.5px;
width: 6.5px;
background-color: #000000;
}
body::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 2.5px;
}
body::-webkit-scrollbar-thumb:hover {
background: #acacac;
border-radius: 2.5px;
}
/* ------------- ELIMINAR SUBRAYADO ------------- */
a:link,
a:visited {
text-decoration: none;
}
.grid-container>* {
border-radius: 4px;
padding: 1px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #232d35;
width: 100%;
height: max-content;
}
.grid-container {
display: grid;
gap: 5px;
grid-template: "header" 70px "main" auto "navbar" 50px "footer" 100px;
}
@media (min-width: 600px) {
.grid-container {
grid-template: "navbar header" 65px "main main" auto "footer footer" 100px / 200px auto;
}
}
@media (min-width: 900px) {
.grid-container {
grid-template: "navbar header header" 55px "main main main" auto "footer footer footer" 100px / 200px auto 200px;
}
}
/* ----------------- ENCABEZADO ----------------- */
.header {
padding-top: 1.2%;
grid-area: header;
display: flex;
border-radius: 0 0 0 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #4c5672;
border-left: 2.5px solid #EEE7CE;
border-bottom: 2.5px solid #EEE7CE;
margin-left: 2%;
}
.header .logo {
display: inline-flex;
font-size: 1.35rem;
font-weight: 450;
color: white;
white-space: nowrap;
}
.header .logo i {
display: inline-flex;
color: #b884c4;
font-size: 1.9rem;
}
.header .logoLupa {
color: rgb(255, 255, 255);
margin-left: 55%;
font-size: 1.4rem;
}
.header .logoHeart {
color: rgb(255, 255, 255);
margin-left: 3%;
font-size: 1.7rem;
margin-top: -.3%;
}
.header .icons div,
.header .icons a {
font-size: 1.5rem;
margin-left: auto;
cursor: pointer;
color: #ffffff;
display: inline;
}
.header .icons div:hover,
.header .icons a:hover {
color: #c228ff;
}
.header .menu-button {
background-color: transparent;
color: white;
margin-left: 170%;
margin-top: -15%;
font-size: 1.7rem;
cursor: pointer;
border: transparent;
}
.header .right-menu {
position: relative;
display: inline-block;
}
/* ----------------- CONTENIDO PÁGINA ----------------- */
.main {
grid-area: main;
background-color: #0f1214;
}
.main .row3 {
background: url(https://lightiscrown.com/wp-content/uploads/2018/05/1920x780.png) no-repeat;
background-size: cover;
margin-right: auto;
margin-left: auto;
background-size: 100%;
min-height: 55vh;
max-height: 55vh;
border-bottom: #EEE7CE 1px solid;
text-align: center;
}
.row3 .btn {
margin-top: 3.25%;
margin-left: auto;
margin-right: auto;
padding: .80rem 1.5rem;
border-radius: .65rem;
color: #ffffff;
background: #558486;
border: 1.5px solid #00000000;
font-size: 1.15rem;
cursor: pointer;
font-weight: 550;
text-decoration: none;
}
.input-box {
position: relative;
height: 76px;
max-width: 900px;
width: 100%;
background: #fff;
margin: 0 20px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.input-box i {
left: 20px;
font-size: 30px;
color: #707070;
}
.input-box input {
height: 100%;
width: 100%;
outline: none;
font-size: 18px;
font-weight: 400;
border: none;
padding: 0 155px 0 65px;
border-radius: 8px;
background-color: transparent;
}
.input-box .button {
right: 20px;
font-size: 16px;
font-weight: 400;
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 6px;
background-color: #785586;
cursor: pointer;
}
.input-box .button.clicked {
transform: translateY(-50%) scale(0.98);
}
/* Responsive BUSCADOR */
@media screen and (max-width: 500px) {
.input-box {
height: 66px;
margin: 0 8px;
border-radius: 8px;
}
.input-box i {
left: 12px;
font-size: 25px;
}
.input-box input {
padding: 0 112px 0 50px;
}
.input-box .button {
right: 12px;
font-size: 14px;
padding: 8px 18px;
}
}
@media (max-width: 765px) {
.main .row3 {
font-size: 2rem;
}
.main .row3 .btn {
font-size: 0.8rem !important;
}
}
<!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">
<!-- ===== Iconscout CSS ===== -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="styleSearchBox.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body class="grid-container">
<!----------- ENCABEZADO ----------->
<header class="header">
<a href="/" class="logo"> <i class="uil uil-book-alt"></i> Biblioteca</a>
<!-- MAL POSICIONADOS - SE DESBORDAN DEL BORDE DERECHO AL PROBAR RESPONSIVE -->
<!-- <a href="/exploreBooksPublic" class="logoLupa"> <i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#" class="logoHeart"> <i class="uil uil-heart"></i></a>
<div class="loggedin">
<div class="wrapper">
<div class="right-menu">
<a class="btn btn-warning" href="/login" role="button">Acceder</a>
</div>
</div>
</div> -->
</header>
<!----------- CONTENIDO PRINCIPAL ----------->
<article class="main">
<div class="row3">
<div class="content">
<h3 style="color: rgba(0, 0, 0, 0);"></h3><br></br>
</div>
<form action="/buscarLibro" method='post' style="margin-top: 3%;">
<div class="input-box" style="margin-left: auto; margin-right: auto;">
<i class="uil uil-search"></i>
<input name="search" type="text" placeholder="Buscar libro..." />
<button type="submit" class="button">Buscar</button>
</div>
<span style="color: rgb(233, 233, 233); font-size: medium;">Títulos - Autores - Editoriales -
IESBN</span>
</form>
<a href="/registrarLibros" class="btn btn-link">
<i class="uil uil-book-alt"></i> Registrar Libro
</a>
</div>
</article>
</body>
</html>