(If you know of a simpler solution to this issue, please share!)
I am aiming for this website to consist of two text sections, one on each side of the screen.
I managed to achieve this successfully by using text alignment and translate3d to shift the text to the right and upwards.
The only hiccup I encountered was that the width of the text on the right side was obstructing interaction with the text on the left side.
To address this, I decided to adjust the width of the text on the right side. However, following this adjustment, the text alignment was disrupted due to margins (as indicated by inspect).
Attempting to set the margins to 0 did not yield any results.
Though I am unsure as to why, here is a snippet of the code:
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:150px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
Even after including this addition, the issue persisted:
#calculator{
margin: 0 !important;
}
So, I am left wondering if there is a feasible method to display text on both sides of the screen concurrently, while keeping them distinct from each other.
Alternatively, is there a way to completely eliminate margins?