How would I make the text responsive. I had some trouble incorporating flexbox, how should I have approached it? Any other critiques and feedback are welcome
Charles Galangera
@galangeracharles17All comments
- @kararAcodeSubmitted over 2 years ago@galangeracharles17Posted over 2 years ago
Hello this is Charles and I saw your post on facebook btw your work here is good.
My approach to your first problem is by using rem that is related to the root of your html file, also by changing px wide screen you have to make some changes regarding to your font size by adjusting it related to the size of your original text size for example at 1400px of wide screen you have a font size of 32px on your h1, by the time you reach the 375px you have to change it like 24px I basically subtract the 8px, so that's some technique I used.
2nd you have to fully understand the concept of flexbox. The importance of flex direction because it has big impact when it comes to the responsiveness of your pages.
Also my tips on understanding how width/vw, heights/vh and min-height works.
Lastly I will give you a proper solution with your current problem at 375px, at your media queries try to change the:
.card{ width:33% <------ change it to 90% }
Well then. Goodluck!
0 - @superschoolerSubmitted over 2 years ago
I couldn't get the small white edge around the border under the guy's head to go away. Any suggestions?
@galangeracharles17Posted over 2 years agoI think the reason is the image, I inspect your code and nothing is wrong with that. For me another option is If you want to fix that you have to create another container which has background-size: cover;
0 - @Gifted12Submitted over 2 years ago
The positioning was a pain in the ass
@galangeracharles17Posted over 2 years agoKeep it up buddy! If you have a time you can have a look on my positioning regarding to that matter. I used flexbox and some other properties that are related to flexbox, I also have clean code that you can easily understand, just use the chrome dev tools. Happy coding!
0