html, body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* Custom Styling */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
/* Button Styles */
}
/* Home Button Hover Effect */
.home-btn:hover {
/* Hover Styles */
}
.intro {
color: white;
font-size: 2.74em;
}
.highlight {
color: #8e0000;
}
/* Navigation */
#navbar {
}
.logo{
/* Logo Styles */
}
.navbar-brand {
/* Brand Styles */
}
#navbar .nav-link:focus {
/* Focus Styles */
}
.logo-wrapper {
/* Wrapper Styles */
}
.logo-spin{
/* Spin Animation */
}
/* Keyframe Animation for Spin */
@keyframes spin{
/* Spin Animation Keyframes */
}
.navbar {
/* Navbar Styles */
}
#navbar {
z-index: 9999;
}
.navbar-text {
/* Text Styles */
}
@media screen and (max-width: 860px) {
.navbar-text {
/* Responsive Styles */
}
}
#navbar a {
/* Anchor Styles */
}
.about {
/* About Section Styles */
}
.section2 .row{
/* Row Styles */
}
/* Media Queries */
You have requested some advice on the responsive errors you are facing in your Bootstrap 4 webpage. Here are a few suggestions based on the issues you've mentioned:
Ensure that the cards in the "projects" section maintain a consistent size even at different viewports. Consider using media queries to adjust card sizes accordingly.
To prevent text wrapping and borders appearing inconsistently in the "about" section, review the container styles and adjust them to handle varying viewport widths effectively.
Address the messy layout at smaller viewports by refining the positioning methods used in your CSS code. Make sure elements stay within their containers and do not overlap in smaller screens.
If you need further assistance with resolving these issues, consider studying CSS positioning techniques and utilizing media queries effectively. Also, reviewing how Bootstrap classes interact with your custom styles can help ensure a smoother responsive design.
For detailed code analysis and troubleshooting, you can refer to your repository link and live page provided below:
Repository Link Live Page