What happened to my layout? [solved]

[webdeveloper]

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?

Portfolio site

[webdeveloper]

hello can some1 help?

[stressstressstress]

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>.

[stressstressstress]

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.

[webdeveloper]

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?

[stressstressstress]

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.

#projects{
  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:

[webdeveloper]

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

[stressstressstress]

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.

[Roma]

@webdeveloper

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

• Codepen creates large and small screen shots of your pens that can be used in your portfolio.
  Access them from;
  https://codepen.io/userName/pen/penName/image/large.png (for the large screenshot)
  and
  https://codepen.io/userName/pen/penName/image/small.png (for the small screenshot)
  • where you replace userName with your codepen userId and penName with the id of one of your codepen pens

[webdeveloper]

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

[webdeveloper]

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/

[webdeveloper]

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

[Roma]

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