Currently, I am in the process of creating a website using a mobile-first approach with media queries. As I progressed to a larger device, specifically a tablet, I had to utilize the float property on my .textcontainer element to ensure it aligned properly on the right side of the image.
Although the float did help vertically center my content on the page, I faced difficulty in horizontally centering both the image and text content. I resorted to adding a margin-right of 8% to the .textcontainer to achieve a centered appearance. However, I am now contemplating if there exists a more responsive method to align all the content in the center of the page.
Furthermore, due to the use of float, I noticed that the .mailicon image no longer centers both vertically and horizontally at the bottom of the page. I am now seeking a way to bring it back to the middle position.
Below is a snippet of my HTML:
<div class="section section4">
<img src="icons/ML-network.gif" alt="icon3">
<div class="textcontainer">
<h1>Ethereum</h1>
<p class="ultralight">A turing complete platform with numerous <br> pre-optimized smart contract templates. Backed by the security of Ethereum.</p>
</div>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680b07061c090b1c2805090f010b0..."><img class="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a>
</div>
Here is a glimpse of my CSS:
main img {
width: 30%;
}
.textcontainer {
float: right;
width: 50%;
margin-right: 8%; /* ADJUST BETTER... */
}
main .section > * {
position: relative;
top: 50%;
transform: translate(0, -50%);
}
main h1 {
text-align: left;
font-size: 1.8em;
margin-top: 0;
}
main p {
text-align: left;
margin: 0;
}
.section4 .mailicon {
clear: both;
width: 40px !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}