Hello. I tried to reverse-engineer the example I was given for the Survey Form project. I got it to look close enough, but I need advice on how to proceed with the responsive design. Should I redo it through the CSS grid system (if it’s even possible), or should I just use the media queries (and advice on how to do it right)?
https://codepen.io/Anhatel/pen/dKwgLJ?editors=1100
Thanks in advance.
The main issue is using constant absolute units for your elements.
I suggest you have a read over this survey form challenge walkthrough article explains this issue more in detail, plus tips and code samples.
Don’t rush, I suggest start something from zero.
Tip: start the layout first, don’t add any content(no text, no element, etc…). First make sure your layout is working.
Add each section of page a unique background color to see how do they located and sized in different screen sizes.
Keep going on great work, happy coding.
Thanks for the reply. I will make sure to take a look at the article you linked, and start from the beginning. Also, thanks for the tip. Sounds like a real good way to make sure everything is working properly, before adding any content. Should be a big time saver!
Thanks my comrade. yes be patient. no rush. For any issue come to us and ask, we will answer(too many great people here could help you indeed)
Hope the article could help you come up with a great design and layout.
Keep going on great work, happy coding.
Hello.
I have redone the project from the start, and now it’s much less complicated, with WAY less code than the previous example. I even managed to make it responsive to a degree, but I’m still not happy with the end result.
The thing is, as soon as I start resizing the window, the content starts going to the left/right side, and the project example doesn’t do that at all. I tried playing around with the grid placement options, but I just can’t get it right.
Can someone please take a look at the code, and tell me what I’m doing wrong?
Thanks in advance!
P.S. The use of absolute units, is so I can get as close as possible to the given example style and look.
It looks much better now,.
The layout could be still broken for small mobile view, becasue you set min-width:320px for it, please remove.
Also the main goes about 70% for mobile, this could be fit the parent, why not? removing the width let the main fit the parent.
This is just an example dear. You are not here to copy and paste designs and ideas, don’t code the UI/UX and creativity so strict. The only rule is being responsive, goo layouting, good spacing between elements, … which you have done perfectly so far.
keep going on great work, happy programming.