В заголовке есть черные полосы выше и ниже изображения размером менее 435 пикселей. ⇐ CSS

[Anonymous]

Происходит следующее: когда размер экрана уменьшается ниже 435 пикселей, в разделе заголовка (где установлено фоновое изображение) над и под изображением отображаются черные полосы. Обычно это происходит, когда изображение не полностью покрывает высоту контейнера заголовка. В результате появляются пустые места, а поскольку цвет фона по умолчанию черный (или темный), эти места заполняются черными полосами.

Код: Выделить всё

[url=#inicio]
evolve studio

[/url]

Menu
[/i]


[list]
[*][url=#serviços]Serviços[/url]
[*][url=#quemsomos]Quem Somos[/url]
[*][url=#equipa]Equipa[/url]
[*][url=#horario]Horário[/url]
[*][url=https://www.regyfit.com/regiprof_wod/registo/novo_registo.php?id_box=2154&lang=pt&code=c626da78178573f8075b82505c63191a]Marcações[/url]
[/list]






Bem-vindos
Está cansado/a de não ter o acompanhamento que merece?
Chegou o momento de conhecer o Evolve Studio.

[url=https://api.whatsapp.com/send?phone=+351915705137&text=Olá! Gostaria de saber mais informações sobre os serviços que o Evolve Studio oferece.]
Entre em contacto connosco
[img]assets/img/whatsapp.webp[/img]
[/url]



/* Geral */
body, html {
margin: 0;
padding: 0;
overflow-x: hidden; /* Isto evita qualquer excesso horizontal */
}

.navbar {
width: 100%;
}

/* Altera a cor de hover para os links da navbar */
.navbar-nav .nav-link:hover {
color: #688fc8 !important; /* Cor quando o link estiver em hover */
}

/* Altera também a cor quando o link estiver ativo ou selecionado */
.navbar-nav .nav-link.active {
color: #688fc8 !important; /* Cor para o link ativo */
}

/* Se precisar ajustar o foco também */
.navbar-nav .nav-link:focus {
color: #688fc8 !important; /* Cor quando o link estiver focado */
}

@media (max-width: 768px) {
.navbar-collapse {
justify-content: center;
}
}

.container, .header, .masthead {
max-width: 100%;
box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura total */
}

/* Estilos do header/masthead */
header.masthead {
background-image: url("../assets/img/capa.webp") !important;
background-size: cover !important; /* Garante que a imagem cubra todo o header */
background-position: center center !important;  /* Centraliza a imagem horizontal e verticalmente */
background-repeat: no-repeat !important; /* Evita que a imagem se repita */
padding-top: 100px !important;
padding-bottom: 100px !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
min-height: 75vh; /* Define uma altura mínima */
position: relative;
}

.masthead-heading{
font-size: 3rem !important;
}
.masthead-subheading {
font-size: 1.8rem !important;
position: relative !important;
bottom: 25px !important
}

/* Media query para telas menores que 992px */
@media (max-width: 992px) {
.masthead {
background-size: contain !important; /* Isso garante que a imagem se ajuste ao header */
background-position: center center !important; /* Centraliza a imagem e posiciona no topo */
background-repeat: no-repeat !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
min-height: 60vh !important; /* Reduz a altura mínima */
}
.masthead-heading {
font-size: 2.7rem !important;
}
.masthead-subheading {
font-size: 1.5rem !important;
position: relative !important;
bottom: 30px !important
}
}

/* Media query para telas menores que 850px */
@media (max-width: 850px) {
.masthead {
background-size: contain !important; /* Isso garante que a imagem se ajuste ao header */
background-position: center center !important; /* Centraliza a imagem e posiciona no topo */
background-repeat: no-repeat !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
min-height: 60vh !important; /* Reduz a altura mínima */
}
.masthead-heading {
font-size: 2.4rem !important;
}
.masthead-subheading {
font-size: 1.2rem !important;
position: relative !important;
bottom: 45px !important
}
}

/* Media query para telas menores que 768px */
@media (max-width: 768px) {
.masthead {
background-size: contain !important; /* Isso garante que a imagem se ajuste ao header */
background-position: center center !important; /* Centraliza a imagem e posiciona no topo */
background-repeat: no-repeat !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
min-height: 60vh !important; /* Reduz a altura mínima */
}
.masthead-heading {
font-size: 1.8rem !important;
}
.masthead-subheading {
font-size: 1rem !important;
position: relative !important;
bottom: 15px !important
}
}

/* Media query para telas menores que 576px */
@media (max-width: 576px) {
.masthead {
background-size: contain !important; /* Isso mantém a imagem ajustada ao header */
background-position: center center !important; /* Posiciona a imagem no topo */
background-repeat: no-repeat !important;
padding-top: 30px !important;
padding-bottom: 30px !important;
min-height: 50vh !important; /* Ajuste ainda mais para smartphones */
}
.masthead-heading {
font-size: 1.5rem !important;
}
.masthead-subheading {
font-size: 0.9rem !important;
}
}

@media (max-width: 435px) {
.masthead {
object-fit: auto !important;
background-size: cover !important; /* Garante que a imagem cubra toda a área */
background-position: center center !important; /* Centraliza a imagem horizontal e verticalmente */
background-repeat: no-repeat !important; /* Evita que a imagem se repita */
padding: 0 !important; /* Remove o padding */
height: auto !important; /* Permite que o header se ajuste ao conteúdo */
min-height: 50vh !important; /* Define uma altura mínima */
}

.masthead-heading {
font-size: 1rem !important; /* Reduz o tamanho do título */
}

.masthead-subheading {
font-size: 0.7rem !important; /* Reduz o tamanho da subtítulo */
position: relative !important;
bottom: 20px !important;
}
}

Я пробовал множество вариантов и решений, но я разобрался.

Подробнее здесь: https://stackoverflow.com/questions/790 ... nder-435px