@OkeraMSubmitted over 2 years ago
I had a lot of trouble with the footer and making my page fully responsive. If you guys have any tips on how I can fix a lot of the issues, feel free to drop some tips.
Florin.Porut
@zastar23All comments
- @zastar23Posted over 2 years ago
Use header, main, footer, don't use div's for landmark components, the images in the footer have a bad path to the img source, try and start working on mobile first design, it is easier because you don't have to worry so much about layout stuff(untill you get to bigger screens). Learn about rem, em, vh, vw, vmax and vmin, don't use fixed units (px).
0 - @leahthompson01Submitted almost 3 years ago
I have a slight gap between the names and where it says verified graduate. I tried a couple of different things, like flex-box, putting them in a div, etc. to fix it but this was as close as I could get. Please let me know if you think of anything that might help!
@zastar23Posted almost 3 years agoHello, to get rid of the space between the name and the verify graduate, just change the line-height in the div containing them and you should be good to go.
Overall nice job done!
0 - @FrancisKhaledKhodjaSubmitted almost 3 years ago
The approach of flexbox and desktop first but difficulties to switch to the mobile view. I am not very satisfied about my css redaction: I had to write two files for the css....
@zastar23Posted almost 3 years agoHi @FrancisKhaledKhodja,
The end result looks nice, but you should try to code mobile first responsive, for me it is much easier, because if you remember, every html document is already responsive at any screen size before adding any css styles.
With that in mind you can code mobile first without having to worry about layout stuff in the beginning, as for the problem that you had and wrote two style sheets, I think the solution to that is to learn about media queries and breakpoints.
Hope this helps, Happy coding!
Marked as helpful1 - @PranayChavhanSubmitted almost 3 years ago
This was a great learning experience using CSS flexbox. Can someone please drop any recommendations on how I can improve my responsiveness for mobile devices? I'm having a bit of trouble with that.
@zastar23Posted almost 3 years agoYou can do mobile first, it solves all your problems, any html you create is already responsive if you don't set fixed widths and heights on you're content.
Learn about em, rem, vh, vw, etc and use them instead of fixed widths like px.
Just play around with the responsive mode in your dev tools and you can figure it out.
Happy coding!
0 - @Abdallahhassan186Submitted almost 3 years ago
couldn't do the mobile version nor adding round edges to the container, I really need some advice with dimension and creating a pixel-perfect-interactive design. Any advice about this or even topics to lookup would be really appreciated.
@zastar23Posted almost 3 years agoTo get the mobile design, add a media query at 600px (in your case) and change de flex-direction of the container to column, add a width to the container of 80% perhaps, and a max-width of around 20 rem or so to not let the cards stretch so much that it becomes hard to read the text because of the long text lines, and maybe you need to add a bit o padding too to the cards.
Hope this helps, happy coding!
Marked as helpful1 - @Gaurav4604Submitted almost 3 years ago
how to make font modular for mobile devices? I have used the rem system for fonts, but it seems not to scale according to mobile devices
@zastar23Posted almost 3 years agoHi, you should always consider doing mobile first, and desktop after, for me it is more easy to do it this way.
I leave you a link about your problem, around the middle of the clip you can find an explanation on typography https://www.youtube.com/watch?v=VsNAuGkCpQU&t=183s.
Hope this helps ! Happy coding!
Marked as helpful0
