This is a solution to the Blogr landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
FEM Blogr Landing Page
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Git repo link
- Live Site URL: Netlify live url
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
To stop the contents of the toggled navbar from pushing the content down.
.navbar-brand {
position: absolute;
z-index: 1;
width: 100%;
}
To get rid of whitespace in screens lesser than desktop width.
@media screen and (max-width: 900px) {
* {
overflow-x: hidden;
}
}
Stackoverflow helped me with getting rid of whitespace and the toggling issue.