Currently, I am working on a three column layout that appears to be functioning well on the surface. However, upon inspecting the page using developer tools, it becomes apparent that the margin of the third middle column is overlapping with the neighboring columns that have been floated on either side. Additionally, my attempts at incorporating media queries to optimize the layout for mobile devices seem to be ineffective. While I understand that frameworks like flexbox or bootstrap could resolve these issues, my main goal is to master the basics before relying on them. I want to be able to tackle similar challenges without the aid of frameworks in case it comes up in a coding interview.
In summary: - Adjust the margin size in a three column layout. - Implement a responsive column layout for mobile devices. Here's a snippet of my code below:
`<!DOCTYPE html>
<html>
<head>
<title>Nav Page </title>
<meta charset="utf-8">
<link rel="stylesheet" href="le.css">
</head>
<body>
<h1>Column Layout</h1>
<div class="col1">
<h2>Column 1</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
<div class="col2">
<h2>Column 2</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
<div class="col3">
<h2>Column 3</h2>
<p>
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolor
e eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui
officia deserunt mollit anim id
est laborum."
</p>
</div>
</body>
</html>
`
Below is my CSS:
* {
box-sizing: border-box;
}
.col1 {
width: 25%;
float: left;
margin: auto;
border: 1px solid black;
}
.col2 {
width: 25%;
float: right;
margin: auto;
border: 1px solid black;
}
.col3 {
width:25%;
heigth: 50px;
margin: auto;
border: 1px solid black;
}
h1 {
text-align: center;
}
@media screen and (max-width: 575px) {
.col1 {
float:none;
}
.col2 {
float:none;
}
.col3 {
float:none;
}
}