Personal Portfolio Page - Responsive Issues

HTML-CSS
#1

I am just about done with my project and now trying to make the page work well on all screen sizes: https://codepen.io/danh4648/pen/VJvyba

I made the images smaller than the 600x300px that I originally had to try to help out with this. The images get smaller as the screen gets smaller by using media queries. It works okay except when the screen gets really narrow, the left-most tile seems to be a little bit bigger than the others.

Also a horizontal scroll bar appears and I scroll to right and there is a white bar down side of page?? Not sure how to make my links in contact section shrink also to fit on smaller screens.

Things I have tried so far: overflow, grid-auto-flow, using flex instead of grid, not using grid or flex, etc.
Not really getting anywhere… Any tips? Am I going about this the wrong way?

*Edit: I got rid of the horizontal scroll bar by adding #contact {overflow:hidden} to one of the media queries. I just need to know how to make the link icons fit in the small screen.

#2

Also, the way I am resizing things as the screen gets smaller seems really clunky. Is there a better way?

#3

Both CSS grid and flexbox and make that layout without any media queries (almost, CSS grid needs a reset). Google search Image grids.

Examples
https://codepen.io/anon/pen/wLWOoQ

2 Likes
#4

Thanks. I was able to make the images resize using grid just by changing the image width to 100% rather than a pixel amount.

The first tile was being made slightly bigger than the other two because the text at the bottom was wrapping. Wasn’t sure how to deal with this so I just used a media query and made the text get smaller so it doesn’t wrap. Is there another way?

I am trying to do a media query for the contact section to make the links get smaller and with less padding so that it can stay in the screen as it gets smaller but for some reason I can’t get it to work. I am trying this:

@media screen and (max-width: 900px) {
    #contact a {
        font-size: 12px;
        padding: 10px;
        overflow: hidden;
    }
}

For some reason the overflow:hidden works in the media query but the font size and padding changes do not. I can change those settings in the css I have and I see the changes but not when using the media query. Why could that be?

1 Like
#5

Also I am trying to make the images look a little less stretched. I used 100% for max width and tried max-height: 200px; but it makes the first tile slightly taller because of the image dimensions I believe. I can set height:200px and all images will all be even height but then the height does not resize as screen shrinks and the pictures get stretched again. Using height:auto also makes the first tile taller.

*Solved! I used em to set the height. height: 20em seems to work great. They resize, images look good, and all images stay same height.

Still need help with resizing the contact section.

1 Like
#6

I would really suggest letting the images wrap and not just scaling them down, it doesn’t look good. You don’t need any media queries.

#projects {
  height: 100vh;
  background-color: #EAAF77;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
}
/* Avoid vertical overflow because of the 100vh */
@media (max-width: 940px) {
  #projects {
    height: 100%;
  }
}

.project-tile {
  justify-self: center;
  align-self: center;
  font-size: 12px;
  text-align: center;
  border: 1px solid gray;
  padding: 10px;
  border-radius: 20px;
  background-color: white;
  margin: 20px;
}

.project-tile img {
  width: 100%;
  max-width: 400px;
  height: 200px;
  border-bottom: solid gray 1px;
  object-fit: cover;
}
2 Likes
#7

Make the contact content wrap, used top/bottom padding instead of height, get rid of the max-width: 1000px media query completely, remove the left/right padding on the contact links at 420px

#contact {
  background-color: #A0A0A0;
  /* height: 20vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* wrap and padding */
  flex-wrap: wrap;
  padding: 20px;
}

#contact a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-family: monospace;
  padding: 40px;
}

@media (max-width: 420px) {
  #contact a {
  /* remove left/right padding */
  padding: 20px 0;
  /* if you want the link to wrap */
  word-break: break-word;
  }
}
2 Likes
#8

Sorry, I have an updated link: https://codepen.io/danh4648/pen/wLWrZx

When I start making a lot of changes I like to fork off the original in case I can’t find my way back if I mess something up.

I will try making the images wrap and see how it goes. The vh of project section doesn’t really need to be 100, would it be easier if I just remove that?

#9

https://codepen.io/danh4648/pen/wLzBjM

This link is set up pretty much the way I want it. The contacts wrap. The tiles resize a way that I like.

I woud like to try wrapping the images also to see how that looks but I haven’t been able to do it.

#10

Here is a fork of the page with the image wrapping you can look at.
https://codepen.io/anon/pen/QXKbmr

1 Like
#11

Thanks. Is there a way to make it go directly to one column instead of having 2 on top and one bottom first?

#12

You can use flex-direction: column; in a media query (and remove the flex-wrap). But I don’t think that having it be one row or one column is very good UX and it’s a waste of available horizontal space.

Having a three column layout wrap to two columns and then to one column, is one of the most common layouts. But there are other ways to make it wrap that do not make the “V” shape if that is what you don’t like about it?

1 Like
#13

I wasn’t a huge fan of the “V” shape but it kind of grew on me. I’m happy with the page the way it is now. Here is the link: https://codepen.io/danh4648/pen/VJvyba

#14

Definitely looks a lot better to me. You might want to consider adding a header to the projects section, like “My Projects” or something. Anyway, good job.:+1:

Here is one using CSS Grid with different wrapping. I didn’t spend too much time on it, it’s just to show what I mean by a different type of wrapping.
https://codepen.io/anon/pen/ydaYwe

1 Like
#15

I totally forgot about this one The Flexbox Holy Albatross. It does what you asked for (one row to one column switch) without using a media query. The article and technique are pretty technical but I just wanted to show it anyway.

Here is the demo Codepen from the article
https://codepen.io/heydon/pen/ebQyYV

1 Like
#16

Thanks for the article. I checked it out but don’t want to get into it now. I’m going onto the javascript section.

#17

I agree a header would be nice but when I add it it is set to left of top row of tiles. Not sure how to get it to top of section.

Sometimes these small changes require a lot of changes and can affect other things that are already working so can be scary to dive into.

#18

I would give the projects a container for the flex layout and move all the flexbox stuff to it. It’s usually better to do that anyway. Let the sections be for document structure and basic stuff like color and then any layout can be on layout specific containers inside the sections.

<section id="projects">
  <h2>My Projects</h2>
  <div class="projects-grid">
    <div class="project-tile">
      <a href="https://codepen.io/danh4648/pen/YozMPQ" target="_blank"><img src="https://raw.githubusercontent.com/danh4648/images/master/techdoc.png"><h2>Technical Documentation</h2></a>
    </div>
    <div class="project-tile">
      <a href="https://codepen.io/danh4648/pen/joLxBb" target="_blank"><img src="https://raw.githubusercontent.com/danh4648/images/master/landing.png"><h2>Landing Page</h2></a>
    </div>
    <div class="project-tile">
      <a href="https://danh4648.github.io/google-homepage" target="_blank"><img src="https://raw.githubusercontent.com/danh4648/images/master/google.png" target="_blank"><h2>Google Clone</h2></a>
    </div>
  </div>
</section>

#projects {
  height: 100%;
  background-color: #eaaf77;
}

#projects > h2 {
  font-family: monospace;
  font-size: 36px;
  text-align: center;
  padding-top: 40px;
}

.projects-grid {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding: 110px 0px 110px 0px;
}
1 Like
#19

Thanks I made the changes and a few others!

What does the > mean in #projects > h2 {}?

Usually I would just write #projects h2 {}

#20

The > means “direct child of”: #projects > h2 only matches an h2 element if it’s nested directly under the element with an id=projects, not if there’s some other intervening element between. Whereas #projects h2 will match the h2 element under the #projects element no matter how deeply nested.

1 Like