Webpage contents Overlapping as the size of viewport decreases

Code Feedback
1

Hi, This is Chandan. I have created a portfolio page to complete my “Responsive Web Design” Certification. Unfortunately, almost on every project I have worked on in this section, I have faced an issue which I haven’t yet understood.

I would like to list them here for all of you to explain it a bit as I am stuck despite trying hard.

(i) More often than not, I face contents of webpage I try to design overlapping whenever position of one of its element is set to “fixed”.

(ii) The problem described above happens when the navigation section’s position is set to “fixed”.

(iii) As the size of viewport changes, contents of header and some other parts doesn’t adjust themselves smoothly.

I would request you to suggest good tutorial on responsive web designing.

Finally, Here is the codepen link of my personal portfolio page which gets messy as size of viewport decreases.
https://codepen.io/croy4744/pen/eYdaQEg

Kindly help me with this. Is there something about responsive designing that I am unable to grasp? KIndly explain so that I can sleep peacfully.

2

Its probably because you have hard-coded the height of your welcome-section, try to remove it and see what happens. Also one width style is enough, you’ve got 2.

3

Well, that did work but that is one of the requirement of the portfolio project.

Well, what can I do to make the navigational section adjusting to the size of viewport in a symmetrical manner?

5

on smaller screens your font size is too large and since you force the height of the welcome section to be 100vh, the text leaves the section and invades where the second section starts. You would want to decrease the font width as the screen goes smaller. Or you can set sliders when the content overflows, but i wouldnt recommend it for the purpose of the page.

6

Sir, Thanks for your response.what do you think should be text size for smaller screen to make it smoothly work?

7

Cory4744, You set the font size to whatever you think looks good for that size screen using a media query. I usually make sure that a page looks good on a iPhone 5 screen because that is a very small screen. For your next project consider starting the design at the size of the iPhone 5 then scaling upwards. It might be easier.

8
  • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

Look at some of your selectors and notice how you hardcode values;

#navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  background-color: teal;
  font-weight: bolder;
  font-size: 1.5em;
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

or

#welcome-section {
  margin: auto;
  width: 100vw;
  height: 100vh;
  text-align:center;
  width: 90vw;
  font-size:3rem;
  color: white;
  padding-top: 150px;
  line-height: 1.5;
}
1 Like
9

Dont know if its the best way but you can try something like this:
Html - instead of styling the font of the whole welcome section give your h1 and p elements a class

<h1 class="x">my h1</h1>
<p class="x">my p</p>

CSS

/* Welcome Section and About me*/

#welcome-section {
  margin: auto;
  width: 100vw;
  height: 100vh;
  text-align:center;
  width: 90vw;
  font-size:; /*remove font size here */
  color: white;
  padding-top: 150px;
  line-height: 1.5;
}

/* add new class style here */
.x{
  font-size:3em;
}


/* For Projects */
/* Media Query for Projects */
@media (max-width: 700px){
    .project-container {
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 90vw);
        justify-items: center;
        grid-gap: 50px 10px;
    }

    .project-tile{
        width: 100vw;
    }
    .project-image{
        width: 100vw;
        height: 100vmin;
    }
/* since the media query below isnt already working because of a missing px. I have added a welcome section here */
  #welcome-section{
        font-size:50%;
  }
}

/* This media query is missing a px, should be 900px. Dont know if that was intentional. */

    /* For welcome section */  /*
@media only screen and (max-width: 900){
    #welcome-section {
        padding-top:10px;
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
        align-items: center;
        width: 100%
    }
  
  .center {
      margin-left:5vw;
      width: 90vw;
      font-size:3rem;
  }
  
  #about-me {
      color: #999;
      width: 97vw;
      font-size:1.5em;
      text-align:justify;
      font-family: 'Lato', sans-serif;
  }
  

}       */
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.