Witam. Ktoś może uznać ten post za 'wczesne poddanie się', ale CSS to dla moja pięta achillesowa i wolę tutaj liczyć na szybką odpowiedź (jak do tej pory bywa za co wielkie dzięki :) ) niż męczyć się z tym cały dzień.
Korzystam z siatki Bootstrapa, właściwie tylko ze schematu container>row>col. Wszystkie sekcje podstron działają w pełni dobrze, są responsywne również jeśli znajdują się na nich zdjęcia, video itp. Jednak z tytułowym nagłówkiem nie mogę sobie poradzić, staram się przełożyć rozwiązania z innych sekcji, jednak jak zwykle CSS mnie zaskakuje oczywiście na moją niekorzyść.
Przy zmniejszeniu strony obraz staje się o wiele za duży, a col-md-5 chowa się pod dolną część strony.
HTML:
<div class="container header">
<div class="row">
<div class="col-md-7">
<a href="<?php echo ROOT_URL;if (isset($_SESSION['admin'])){echo 'admin';}elseif(isset($_SESSION['user'])){echo 'user';}?>" class="logo">
<h1>Masarnia Records</h1>
<img class="img-fluid" src="<?php echo ROOT_URL;?>assets/img/masarnia.png">
</a>
<p>Promujemy rap prawdy.</p>
</div>
<div class="col-md-5">
<?php
if (preg_match ('@(admin)@', $_SERVER['REQUEST_URI'])){
echo '<ul><li>Tryb administratorski</li></ul>';
}elseif (preg_match ('@(user)@', $_SERVER['REQUEST_URI'])){
echo '<ul><li>Panel użytkownika</li></ul>';
}else{
echo '<ul>
<li><a href="'.ROOT_URL.'">Aktualności</a></li>
<li><a href="'.ROOT_URL.'music">Strefa muzyki</a></li>
<li><a href="'.ROOT_URL.'contact">Współpraca</a></li>
</ul>';
}
?>
</div>
</div>
</div>
CSS:
.header{
background: black;
height: 26%;
padding: 0 0 5% 0;
margin-bottom: 1%;
-moz-border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-khtml-border--bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
width: 100%;
.col-md-7{
width: 100%;
h1{
font-size: 0;
}
.logo{
width: 100%;
}
img{
float: left;
height: 100%;
object-fit: cover;
}
img:hover{
opacity: 0.8;
}
p{
color: white;
padding: 6% 0 0 0;
font-size: 310%;
font-family: Chiller;
text-align: right;
}
}
.col-md-5{
width: 100%;
ul{
float: left;
width: 100%;
padding-top: 36%;
margin-bottom: 1%;
color: white;
li{
display: inline;
width: 34%;
padding: 0 5% 0 0;
}
a:link, a:visited{
text-decoration: none;
color: white;
font-size: 110%;
}
a:hover{
color: gold;
}
}
}
}
Szczerze, trochę już tu kombinowałem, bo projekt mam już na wykończeniu, więc w końcu się za to zabrałem, ale zamysł pozostał ten sam. Jeśli czegoś brakuje to szybko podeślę, z góry dziękuję za pomoc, front-end to dla mnie znienawidzona konieczność, więc proszę o wyrozumiałość :)
Przesyłam również dwa screenshoty (wersja komputer-telefon), dwie części row mają zmienione tło dla lepszego zobrazowania sytuacji (w kodzie źródłowym tego nie ma).
https://imgur.com/a/aLoO6Bv