Having trouble creating a responsive web page. Here are the specifics:
Sharing my HTML and CSS code below: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous" />
<title>Document</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<div class="container">
<div class="article">
<div class="article-preview"></div>
<div class="article-info">
<h1>
Content goes here...
</h1>
<p>
More details inside...
</p>
<div class="article-author">
<i class="fa fa-apple" aria-hidden="true"></i>
<div class="author-info">
<span class="author-name">Author Name</span>
<span class="date">Date</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Trying to get the .article-preview flexbox item move up while the .article-info item moves below it.
To make the page responsive up to 763px browser width, added @media query with specified changes: -
@media (max-width: 763px) {
/* Responsive CSS for smaller screens */
}
Trouble is, when setting heights, elements still differ in size and overflow occurs from the container.
Desired outcome: 1) column direction, 2) same sizes for both items, 3) contained layout without overflow, and 4) responsive resizing within container. Seeking guidance on correcting this issue as a novice developer using HTML and CSS only.
PS: Important to implement solution exclusively using HTML and CSS.