Responsive Text passt nicht

[bastian48]

Hi ich habe eine Webside (bastify.de). Ist ein Udemy Kurs ich habe die Webside als Spaß so ähnlich gehoostet.

Bei 1088 Pixel passt der Text im flex container nicht mehr kann mir jemand helfen bitte.

Das Problem ist genau 1088px also darunter passt es nicht. Ich habe nur eine medie query bei 1088 px.

@media (max-width: 1088px){

.flex-container {
align-items: stretch;
flex-direction: column;
}

.leistungs-box {
padding: 2rem 4rem;
margin-bottom: 2rem;
min-height: initial;
}
}

Hier das zugehörige HTML

<!-- LEISTUNGEN-SEITE -->

<section class="leistung">
<div class="flex-container">
<header class="intro-container">
<h1>Unsere Leistungen</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum officiis ipsum rerum autem provident enim non reprehenor sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsamor sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsamderit nesciunt incidunt nisi, magnam, porro amet ea, minus iusto omnis obcaecati quae tempora?</p>
</header>
</div>

<div class="flex-container">

<article class="leistungs-box">
<div>
<h1>Basic</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsam or sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsamor sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsamor sit amet consectetur adipisicing elit. Dolore eligendi fugiat nostrum nam ab enim ipsamnobis dolores illum, velit repellendus sunt iste ratione nemo ad odit. Numquam, nam voluptas.</p>
<ul>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
</ul>
</div>
<button type="button" class="btn-typ-2 leistung-auswählen-btn">Auswählen</button>

</article>


<article class="leistungs-box leistungs-box-empfohlen">
<div>
<h1>Advanced</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt facilis molestias mor adipisicing elit. Architecto eos exercitationer adipisicing elit. Architecto eos exercitationer adipisicing elit. Architecto eos exercitationer adipisicing elit. Architecto eos exercitationelestiae atque ad consectetur dicta dolorum? Iusto quae veritatis nobis, dolorem mollitia magni cum, accusantium veniam rem explicabo sit!</p>
<ul>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
</ul>
</div>
<button type="button" class="btn-typ-2 leistung-auswählen-btn">Auswählen</button>

</article>

<article class="leistungs-box">
<div>
<h1>Professional</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architr adipisicing elit. Architecto eos exercitationer adipisicing elit. Architecto eos exercitationeecto eos exercitationem alias? Omnis dicta voluptatibus aut fugiat non recusandae eius earum saepe repudiandae, laborum dolor, sapiente qui animi corrupti veritatis.</p>
<ul>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
<li>lorem impsum dolor sit amet</li>
</ul>
</div>
<button type="button" class="btn-typ-2 leistung-auswählen-btn">Auswählen</button>
</article>

</div>
</section>


Danke

 

[Sempervivum]

Hallo @bastian48 und willkommen im Forum!

Was meinst Du denn genau wenn Du schreibst, dass es nicht passt? Auf dem zweiten Screenshot ist der Text nicht richtig zentriert sondern nach rechts verschoben. Ist es das?

 

[bastian48]

Ja genau das ist das xD

Der Text geht über den flex-container rechts etwas hinaus. Das passiert bei 1088px. Wo ich sage flex-direction column

 

[bastian48]

@Sempervivum weist du wie ich das fixe?

 

[Sempervivum]

Hallo @bastian48
Ich hatte mir das auf bastify.de angesehen aber dort konnte ich das Problem nicht reproduzieren, alles perfekt horizontal zentriert.
Dort finde ich auch das Kapitel mit der Überschrift "LEISTUNG" nicht.