Help with responsive design needed!

HTML-CSS
1

Hello everyone, I finished my personal portfolio project with all its tests passing but I noticed that there are some problems with responsiveness. I inserted the media queries and everything but I just can’t understand where the problem lies. Maybe is there a problem with my grid? Thank you in advance for your help!

2

Dear Alessio,

If you ask me, there is nothing you can’t do with design and layout. Just like your survey form I remember had some bad issues for first release, and just after some updates it became really great.

This is also true about your current page pal.

Before we go, you may also specify the exact issue you found and trying to solve. Because one thing I think is faulty, is the one you expected.

I suggest you, always make the layout(structure) before you put any content/data on your page.
User background colors to see containers(like div tags) positions and sizes in your page. When everything is white(no colour) so it’s hard to find out why there is some space!

Now about your current work. The issue you have about mobile, I see there are too much spaces! between containers.
For example you set 100vh as height for top container host your name and title as following

#welcome-section {
    position: absolute;
    height: 100vh;
}

That 100vh for height means 1 screen height for this element(e.g. if screen height is 10in, so 10in for this element)

I don’t know if you were looking for exact behavior, just noting stuffs.

Another issue is about the first element of first container, which is “Hello I’m Alessio”, note you set some top margin for this element. as following

#welcome-section > h1 {
    font-family: Helvetica;
    margin-top: 75%;
}

First note, by default, browser applies that 100vh for your first container(welcome-section), plus child top margin 75%. So its height is 100vh + 75%.
Now if you were looking for just 100vh, and expected that 75% not affect the height, first remove the margin-top of above h1 tag, and add padding-top:75% for your container (welcome-section)

The same stuff for #contact2 rule. it has some top margin and height values.

My suggestion:
Try start a new layout(no content), and set a different colour for each section/container you add. Don’t add any content(text/image/style, etc… just layout/structure). Test and debug it until you sure it’s responsive very awesome.
Avoid using absolute position and floating elements when possible.
Try not to control any elements height when possible!
When adding page content, do it one by one. And for each content you persist, do a test. Maybe some content causes some layout break, so it’s better fix it before go for next element.

Hope it helped, don’t give up, be patient and do the job great like your previous works.

Keep goin on great work, happy programming.

1 Like
3

Thank you very much @NULL_dev, very useful advice indeed. I’ll try to start a new layout following your advice. It should be somewhat easier now that I know where I want to position my content :slight_smile: