This is a solution to the Blogr landing page challenge on Frontend Mentor.
- Solution URL: Repository
- Live Site URL: GitHub Pages
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.
- Semantic HTML5 markup.
- CSS custom properties.
- Flexbox (I did not use Grid).
- Mobile-first workflow.
I learned that making a full page takes more time than I expected, but with the layout in sight, it can be done easily.
One of the things that perplexed me the most was that, in the desktop view of the Chrome browser for Android, the texts on the page increased in size for no apparent reason, after trying things without achieving results, I resort to StackOverflow and find the solution:
.text-container {
max-height: 999999px; /* Fix the issue in Chrome Mobile with desktop view */
}
Something I want to improve soon is my CSS layout speed, and the ability to create correct class names.
- Font size display issue on Google Chrome for Android - This helped me solve my desktop view issue in Chrome for Android.
- Frontend Mentor - @leonardomeza87
- Twitter - @leonardomeza87
This project does not have any dependencies.
To clone:
git clone https://github.com/leonardomeza87/blogr-landing-page.git