Assignments Of Class 29: Debugging CSS
Assignment 1: Debugging Layout Overflow Issue
Problem:
In the following code, the .container div is overflowing the page. The content should not overflow horizontally, but it does. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Overflow Issue</title>
<style>
.container {
width: 100%;
margin: 0;
padding: 10px;
background-color: lightblue;
}
.content {
width: 1200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
Content goes here
</div>
</div>
</body>
</html>
Solution:
The issue is that the .content div has a fixed width of 1200px, which causes it to overflow the container. To fix the issue, use max-width: 100% on the .content div so that it never exceeds the width of the container.
css
CopyEdit
.content {
max-width: 100%;
background-color: yellow;
}
Explanation:
The max-width: 100% ensures that the content will scale according to the size of the container without exceeding its width, preventing overflow.
Output:
The content div will now fit inside the container without overflowing.
Assignment 2: Debugging Centering Issue
Problem:
The .box element is supposed to be centered in the middle of the page, but it is not appearing as expected. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Issue</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: lightcoral;
position: relative;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Solution:
To center the box, use position: absolute with top, left, and transform. Here’s how:
css
CopyEdit
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
background-color: lightcoral;
}
Explanation:
- display: flex on the body centers its child element both horizontally and vertically.
- justify-content: center aligns it horizontally.
- align-items: center aligns it vertically.
Output:
The .box element will be centered in the middle of the screen.
Assignment 3: Debugging Background Image Not Showing
Problem:
The background image is not appearing in the following code. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Issue</title>
<style>
body {
background-image: url('non-existent-image.jpg');
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Solution:
The image URL is incorrect or the image is missing. To fix this, either ensure the image exists or use a valid URL. You can also use a placeholder image to test.
css
CopyEdit
body {
background-image: url('https://via.placeholder.com/150');
background-size: cover;
}
Explanation:
The issue was a non-existent or incorrect path to the image. Using a valid image URL resolves the issue.
Output:
The background will now display the placeholder image correctly.
Assignment 4: Debugging Text Alignment Issue
Problem:
The text inside the .text-box div is not aligned properly. It should be centered horizontally and vertically. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment Issue</title>
<style>
.text-box {
width: 300px;
height: 200px;
background-color: lightgreen;
font-size: 20px;
}
</style>
</head>
<body>
<div class="text-box">
This is a test text
</div>
</body>
</html>
Solution:
Use Flexbox to align the text both horizontally and vertically.
css
CopyEdit
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.text-box {
width: 300px;
height: 200px;
background-color: lightgreen;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
Explanation:
- display: flex on .text-box allows easy centering.
- justify-content: center horizontally centers the text.
- align-items: center vertically centers the text.
Output:
The text will be centered inside the .text-box div.
Assignment 5: Debugging Fixed Positioning Issue
Problem:
The .header div should be fixed at the top of the page, but it’s not behaving as expected. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Positioning Issue</title>
<style>
.header {
background-color: lightblue;
width: 100%;
height: 60px;
}
.content {
margin-top: 80px;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="content">Content goes here</div>
</body>
</html>
Solution:
To fix the header positioning, use position: fixed for the header.
css
CopyEdit
.header {
background-color: lightblue;
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
Explanation:
- position: fixed locks the element to the top of the page.
- top: 0 and left: 0 position it at the top-left corner.
Output:
The header will stay fixed at the top of the page even when scrolling.
Assignment 6: Debugging Floating Elements Issue
Problem:
The two .box elements are floating next to each other, but they are overlapping. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Elements Issue</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Solution:
Use clear: both to clear the floats.
css
CopyEdit
.box {
width: 100px;
height: 100px;
background-color: lightblue;
float: left;
margin: 10px;
}
body::after {
content: "";
clear: both;
display: block;
}
Explanation:
- clear: both ensures that the floated elements are properly cleared so they don't overlap.
Output:
The two .box elements will now appear side by side without overlapping.
Assignment 7: Debugging Responsive Layout
Problem:
The layout is not responsive, and it breaks when viewed on smaller screens. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Issue</title>
<style>
.container {
width: 100%;
margin: 0 auto;
padding: 10px;
background-color: lightgray;
}
.box {
width: 500px;
height: 300px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Solution:
Use media queries to make the layout responsive.
css
CopyEdit
.container {
width: 100%;
margin: 0 auto;
padding: 10px;
background-color: lightgray;
}
.box {
width: 500px;
height: 300px;
background-color: lightgreen;
margin: 10px;
}
@media (max-width: 600px) {
.box {
width: 100%;
}
}
Explanation:
- The media query targets screens with a maximum width of 600px, and it sets the .box width to 100%, making the layout responsive on smaller screens.
Output:
On smaller screens, the .box elements will stack vertically instead of being side by side.
Assignment 8: Debugging Font Size Issue
Problem:
The font size is not applied to the text in .paragraph. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size Issue</title>
<style>
.paragraph {
color: darkblue;
}
</style>
</head>
<body>
<p class="paragraph">This is a paragraph.</p>
</body>
</html>
Solution:
To fix the issue, add the font-size property.
css
CopyEdit
.paragraph {
color: darkblue;
font-size: 20px;
}
Explanation:
The font-size property was missing, causing the default font size to be applied.
Output:
The text will now appear with a font size of 20px.
Assignment 9: Debugging Box Model Issue
Problem:
The .box element's background color doesn't extend to the padding. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Issue</title>
<style>
.box {
width: 300px;
height: 200px;
padding: 20px;
background-color: lightcoral;
border: 5px solid darkred;
}
</style>
</head>
<body>
<div class="box">Content inside box</div>
</body>
</html>
Solution:
The box-sizing property should be set to border-box to include padding and borders within the width and height.
css
CopyEdit
* {
box-sizing: border-box;
}
Explanation:
box-sizing: border-box ensures that padding and borders are included within the element's total width and height, preventing layout shifts.
Output:
The background color will now extend to include padding and borders.
Assignment 10: Debugging Overlapping Text Issue
Problem:
The text inside .text-box is overlapping the container. Debug and fix the issue.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlapping Text Issue</title>
<style>
.container {
width: 300px;
background-color: lightblue;
}
.text-box {
padding: 10px;
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="text-box">This text is overlapping</div>
</div>
</body>
</html>
Solution:
Add overflow: auto to handle the overflow of text.
css
CopyEdit
.container {
width: 300px;
background-color: lightblue;
overflow: auto;
}
Explanation:
The overflow: auto property ensures that overflowing content is handled and doesn't break the layout.
Output:
The text will no longer overlap the container and will be properly contained.
No comments:
Post a Comment