What happened to my layout? [solved]

The 1st problem is the contact section, where you can see the captions overlaps the images (I put them in a figure).

The 2nd problem is when you make the screen smaller the elements in the projects section comes over to the contact section AND they overlap the other elements.

How do I fix this? And why is this happening?

hello can some1 help?

All of your contact section is wrapped in an <a> (opening tag on line 74). That might be part of the problem.

Actually I see that all of your sections are like that. Did you do that because you want them to be accessible by the links in the nav bar? You should just use <div>.

1 Like

The problem is using <figure>. From w3schools:

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

I would get rid of <figure> and <figcaption> since they’re not really needed for these icons anyways. If you want to have icons for things like Facebook, Linkedin, etc, you could use Font Awesome icons. They are very easy to use, and you don’t have to worry about image files.

1 Like

Last problem: when you make the screen smaller at some point the grid items in the projects section comes over to the contact section and overlaps the other items. How do I fix this?

I am so bad at this kind of thing, so don’t take this as the best solution!!

But maybe this will fix it for you: changing height: 100vh; to min-height: 100vh; for the project section. That way it can get more height if needed.

  background-color: darkslategray; 
  min-height: 100vh;

Or use media queries to change the layout? That’s probably better for responsiveness.

Also, by the way your images aren’t showing up for me, if you didn’t know:

1 Like

That’s because the images are stored locally on my computer. I have no idea how to get it to work on codepen, I don’t have the img urls.

One final question my friend, everything is alright, the only thing is there is a white space between the projects section and the contacts section (on a very small screen). How do I remove this white space?

BTW I’ve updated the code on codepen also

Again, I am not the expert on this kind of thing…

But that white space looks like a problem with the height of your sections.

This gets rid of it:

section {
    height: 100%;

But maybe it causes other problems, don’t know.

I know I already done this locally. I only use codepen to share my code with you guys

However one of my project there is no screenshot? It says: screenshot comming soon. But totday still no screenshot? See: https://codepen.io/collection/DLModE/

what’s better: using images locally or using urls?

You may have to refresh your browser to see the image on codepen that says “screenshot coming soon”