Struggling with my survey form project - Responsive Web Design

Code Feedback
1

Hello, despite my project passing it’s test there I still have an issue with resizing the form in different browser sizes. I put in a media query to set the max-width of my container class to
480px and 720 px respectively but it did not make a difference. I feel as though my code is poor as well, any advice on where and how to make my improvements will be greatly appreciated.

Here is the link to my project: https://codepen.io/RadziMagoda/pen/YzrQxLL

2

The biggest piece of advice is to not take code from the sample projects.
Make the project from scratch, with your own code, style and content.
The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gained from the incremental challenges.
The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.

A couple of tips about responsiveness;

  • Rather than using fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
1 Like
3

Alright thank you very much for the advice, I’ll start the project from scratch and practice more

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.