As I work on bringing my vision to life, I'm experimenting with a mix of floats and divs, along with using a responsive image for the background and text. There's quite a bit involved in this process.
1. To start off, check out this example with a responsive image here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page.
2. Next, explore text responsiveness with this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text.
3. Finally, I aim to have the first div stack on top and the second div at the bottom once they resize into tablet or mobile sizes from the code below.
3.1. When in tablet mode, the first div and second div should be centered on the screen for a clean look. As for iPhone size, the h2 text and paragraph would fill the entire width of the screen from left to right.
NOTE / FYI: I intend to use the first div for an image.
I found inspiration from this forum thread which provided valuable insights and solutions. How to center two divs floating next to one another. I particularly liked the method with 6 upvotes and made some adjustments to suit my needs. Check it out here. I'm someone who learns as I go, still mastering HTML and CSS without being a pro. Your guidance with comments explaining functions after semicolons would be greatly appreciated. Thank you!
HTML
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper" style="text-align:center;">
<div style="float:left;background-color:red;width:50%">
Lorem ipsum<br>dolor sit amet
</div>
<div style="float:right;background-color:blue;width:50%" ">
Lorem ipsum<br>dolor sit amet
</div>
</div>
</body>
</html>