У меня есть проблема, я не могу сделать так, чтобы текст был даже с другим, если заголовок в резюме длиннее в одной из статей. Какие-нибудь решения?
/* fonts used */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Noto Sans', sans-serif;
}
/* container flex */
.container-flex {
display: flex;
flex-wrap: wrap;
}
p.special-text {
font-size: 20px;
}
.special-text {
font-size: 20px;
color: #707070;
text-align: center;
}
/* about us */
.fb-75 {
flex-basis: 75%;
}
.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.fb-100 {
flex-basis: 100%;
}
.fb-33 {
flex-basis: 33%;
}
.heading-about-us {
color: #707070;
font-size: 26px;
}
.heading-about-us>p {
padding-top: 100px;
}
summary+p {
display: flex;
}
details summary::-webkit-details-marker {
display: none;
}
details {
cursor: pointer;
}
article.fb-75 {
align-content: center;
}
summary {
transition: all 0.3s ease 0s;
text-align: center;
}
summary h4:hover {
color: rgba(0, 151, 20, 0.8);
}
/* newsletter and offers - aside */
.fb-25 {
flex-basis: 25%;
}
.text-center {
text-align: center;
}
input.btn2 {
margin: 10px;
background: rgba(128, 210, 30, 40%);
color: white;
border-radius: 60px;
border: 1px #707070 solid;
padding: 20px 20px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #707070;
}
/* write your email here input */
.email-field {
border: 1px solid #707070;
width: 60%;
padding: 15px 15px;
border-radius: 30px;
font-size: 20px;
margin-left: 10px;
}
label {
font-size: 20px;
color: #707070;
text-align: left;
}
.email-field:focus {
outline: none;
border: 1px solid #0066ff;
box-shadow: 0px 0px 2px #0066ff;
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XeDA+ - sklep internetowy</title>
<link rel="stylesheet" href="css/homepage_noresp.css">
<meta name="author" content="Jan Kustra">
<meta name="description" content="Chcesz zakupić bezpiecznie z daleka od ludzi, aby nie zarazić się COVID-19 - dobrze trafiłeś.">
<meta name="keywords" content="shop,sklep,zakupy,xe,xeda,Xe,XeDA+,xeda+,angielski,English,english,computer,komputer,usługi,services">
</head>
<body>
<div class="container-flex">
<!-- main -->
<main class="fb-100 d-flex flex-wrap text-center"></main>
<!-- opis firmy -->
<!-- pierwszy artykuł - 3 sekcje -->
<article class="fb-75 d-flex flex-wrap">
<section class="fb-33 d-flex flex-wrap">
<details class="fb-100 d-flex flex-wrap">
<summary>
<h4 class="heading-about-us">Możesz nam zaufać - my nie gryziemy</h4>
</summary>
<p class="special-text">No może trochę, tych co są wobec Ciebie niesympatyczni. Nasza firma jest skupiona na kliencie i dokładamy wszelkich starań, aby dobrać pogodny i doświadczony zespół. Dla nas liczy się przede wszystkim dobro klienta oraz satysfakcja z przemyślanego
zakupu.</p>
</details>
</section>
<section class="fb-33 d-flex flex-wrap">
<details class="fb-100 d-flex flex-wrap">
<summary>
<h4 class="heading-about-us">Reklamacje to u nas nie problem. Pomagamy je rozwiązać.</h4>
</summary>
<p class="special-text">Dokładamy wszelkich starań, aby obsługa klienta w naszej firmie była na najwyższym poziomie, stąd też przyjmujemy na nasze stanowiska tylko doświadczonych pracowników i szanujemy prawa konsumentów oraz nabywców naszych usług i produktów. U nas
nie ma sporów, są tylko pozytywne rozmowy :).</p>
</details>
</section>
<section class="fb-33 d-flex flex-wrap">
<details class="fb-100 d-flex flex-wrap">
<summary>
<h4 class="heading-about-us">Jesteśmy otwarci na propozycje 24/7. Twoja opinia jest dla nas istotna.</h4>
</summary>
<p class="special-text">Nie wrzucamy waszych opinii i feedbacku do kosza, przekazujemy je wprost do naszego zespołu ds. projektowania i logistyki. Na każdą opinię odpowiadamy, oraz odpowiadamy czy planujemy wprowadzić zaproponowane funkcjonalności, a jeśli to podajemy
również przewidywalny termin realizacji :).</p>
</details>
</section>
</article>
<!-- aside -->
<aside class="fb-25 d-flex flex-wrap text-center">
<article class="fb-100 d-flex flex-wrap">
<section class="fb-100">
<h4 class="heading-about-us heading-aside-special">Dowiedz się o promocjach!</h4>
<h4 class="heading-about-us heading-aside-special2">Zapisz się na newsletter.</h4>
<form action="newsletter.php" method="POST"></form>
<label for="email">Email:<input class="email-field" id="email" type="email"></label>
<input type="submit" class="btn2" value="Zapisz się">
</form>
</section>
</article>
</aside>
</main>
</div>
</body>
</html>
Проблема показана там: https://imgur.com/a/5i2Ea2r Я бы хотел, чтобы каждый текст был четным. Также есть ли способ сделать так, чтобы кнопка помещалась в одну строку?
https://codepen.io/znaczki654/pen/pojRbEm