Design comparison
SolutionDesign
Solution retrospective
Would love to get some feedback on how I handled responsiveness on
- Image
- Typography (font-size). Are there better practices I could have used ?
Problems I encountered and How I solved them
-
Making the Image Responsive:
- Wrapped the Image with a div element
- Set the Wrapper to fill 100% of its parent
- Set the Wrapper to have have a min-width of 250px. for mobile view of 320px.
- Set the Blog Container(white background) to have a max-width of 350px. So the Image-Wrapper does not grow beyond that, and the image does not follow along.
-
I wanted the Blog tag
learning
to look like a button but not have full-width: Used an inline-block for blog taglearning
. When do I use inline-block. -
Setting margins and paddings with
em
unit proved useful for when I add media queries for responsiveness. It keeps the spacing consistent no matter the size of the text. -
Made use of a flexbox to align Author's Image and Name.
-
Adding Responsiveness to the Blog component:
- Typography: Typography is something that will usually need media queries because you need to adjust the size of the text to be bigger on bigger screens like desktop and tablets and to be smaller for smaller screens like mobile phones.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord