Witam, jestem w trakcie tworzenia strony dla projektu servera minecraft w którym biorę udział i borykam się z jednym problemem, który zatrzymuje moją prace i nie jestem w stanie sobie z nim poradzić.
Przechodząc do rzeczy:
Tak finalnie ma wyglądąc tekst na stronie https://imgur.com/a/fPiVNkn.
Aktualnie udało mi się osiągnąć taki efekt robiąc po prostu bardzo duży margines diva który ma być po prawo, ale strona fatalnie skaluje się na urządzeniach mobilnych.
Problem na samym początku próbowałem rozwiązać robiąc diva w divie tzn. jeden duży div o szerokości 100% a w nim mniejszy div o szerokości 40% który ma by przeniesiony do prawej strony diva nadrzędnego o szerokości 100%, ale jakoś to nie chciało wyjść.
Próbowałem też użyć float'ów żeby przenieść diva na prawą stronę co w praktyce się udawało, ale gdy dodałem kolejny tekst na stronie który miał być po lewo to oba teksty były na tej samej wysokości i nachodziły na siebie. (tak to wygłądało https://imgur.com/a/fPiVNkn) .
Próbowałem to zrobić na różne sposoby, ale do tej pory żadnym mi się nie udało oprócz bardzo wielkim marginesem, który wpływa na fatalne skalowanie się strony na urządzeniach mobilnych.
Mam nadzieję, że ktoś pomoże rozwiązać mi ten problem
Kod strony html:
<div id="faq-content">
<div id="left-div">
<div id="left-text">
<h2>Kiedy start serwera?</h2>
<p>Jak wygladaja bany na serwerze?</p>
</div>
</div>
<div id="right-div">
<div id="right-text">
<h2>Kiedy start serwera?</h2>
<p>Jak wygladaja bany na serwerze?</p>
</div>
</div>
<div id="left-div">
<div id="left-text">
<h2>Kiedy start serwera?</h2>
<p>Jak wygladaja bany na serwerze?</p>
</div>
</div>
<div id="right-div">
<div id="right-text">
<h2>Kiedy start serwera?</h2>
<p>Jak wygladaja bany na serwerze?</p>
</div>
</div>
Kod css:
#faq-content {
font-family: Lato;
}
#left-div {
width: 100%;
}
#right-div {
width: 100%;
}
#left-text {
width: 40%;
max-height: 200px;
border-bottom: 3px solid #800000;
margin-left: 120px;
}
#left-text h2 {
color: #800000;
font-size: 2.7em;
}
#left-text p {
color: #595a5b;
font-size: 1.6em;
}
#right-text {
width: 40%;
max-height: 200px;
border-bottom: 3px solid #800000;
float: right;
text-align: right;
margin-top: 25px;
}
#right-text h2 {
color: #800000;
font-size: 2.7em;
}
#right-text p {
color: #595a5b;
font-size: 1.6em;
}
