OkeraM• 280
@OkeraM
Submitted
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
@zastar23
All comments
- Florin.Porut• 380
@zastar23
Posted
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 - Leah Thompson• 30
@leahthompson01
Submitted
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!
Florin.Porut• 380@zastar23
Posted
Hello, 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 - Francis• 260
@FrancisKhaledKhodja
Submitted
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....
Florin.Porut• 380@zastar23
Posted
Hi @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 helpful
1 - Pranay Chavhan• 20
@PranayChavhan
Submitted
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.
Florin.Porut• 380@zastar23
Posted
You 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 - Abdallah Hassan• 20
@Abdallahhassan186
Submitted
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.
Florin.Porut• 380@zastar23
Posted
To 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 helpful
1 - Gaurav Singh• 440
@Gaurav4604
Submitted
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
Florin.Porut• 380@zastar23
Posted
Hi, 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 helpful
0
