Html Question posted in
Some basic documentation can be found here.

Making a HTML page responsive

I’mm currently learning HTML and I want to make my webpage responsive (e.g. when the window resizes, I want my content to resize accordingly without any glitches). Right now, when I resize my window there are some problems that occur:

  1. A white gap appears in between both of my background images, and
  2. the downward arrow remains in its position, and doesn’t follow the rest of the content.

Can someone help with this? Thank you so much, I appreciate it.

My code:

nav {
  position: relative;
  margin: 27px auto 0;
  width: 590px;
  height: 50px;
  background: black;
  border-radius: 8px;
  font-size: 0;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}

nav a {
  font-size: 15px;
  text-transform: uppercase;
  color: whitesmoke;
  text-decoration: none;
  line-height: 50px;
  position: relative;
  z-index: 1;
  display: inline-block;
  text-align: center;
}

nav .animation {
  position: absolute;
  height: 5px;
  bottom: 0;
  z-index: 0;
  background: brown;
  width: 100px;
  border-radius: 8px;
  transition: all .5s ease 0s;
}

a:nth-child(1) {
  width: 100px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
}

a:nth-child(2) {
  width: 100px;
}

nav .start-projects,
a:nth-child(2):hover~.animation {
  width: 100px;
  left: 100px;
}

a:nth-child(3) {
  width: 150px;
}

nav .start-certifications,
a:nth-child(3):hover~.animation {
  width: 150px;
  left: 200px;
}

a:nth-child(4) {
  width: 100px;
}

nav .start-others,
a:nth-child(4):hover~.animation {
  width: 100px;
  left: 350px;
}

a:nth-child(5) {
  width: 100px;
}

nav .start-others,
a:nth-child(5):hover~.animation {
  width: 100px;
  left: 450px;
}

.background {
  background-image: url(images/CardistryBGD2.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 5px;
  margin: -8px;
  max-height: 100%;
  max-width: auto;
}

.Page_Title {
  text-align: center;
  overflow: auto;
  height: 500px;
  width: auto;
  line-height: 320px;
  position: relative;
  margin-bottom: 8px;
}

.arrow-wrap {
  position: relative;
  bottom: 0px;
  -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
  -moz-animation: arrow 0.5s 1s infinite ease-out alternate;
  -o-animation: arrow 0.5s 1s infinite ease-out alternate;
  animation: arrow 0.5s 1s infinite ease-out alternate;
  width: 56px;
  margin-left: 600px;
}

.arrow-wrap:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.arrow {
  padding: 15px;
  border-left: solid 5px black;
  border-bottom: solid 5px darkred;
  position: relative;
  display: inline-block;
}

.arrow-down {
  transform: rotate(-45deg);
  bottom: 200px;
  margin-top: -50px;
}

@-webkit-keyframes arrow {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}

@-moz-keyframes arrow {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: 10px;
  }
}

@keyframes arrow {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: -90px;
  }
}

h1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 9vw;
  color: rgb(175, 0, 0);
}

h2 {
  text-align: center;
  color: brown;
  font-size: 3vw;
  margin: 8px;
  padding: 30px;
}

.Avatar {
  vertical-align: middle;
  width: 145px;
  height: 140px;
  border-radius: 50%;
  margin-left: 75px;
}

.About {
  margin: -9px;
  background-image: url(images/CardBG.jpg);
  background-size: 100%;
}

.ABT {
  display: flex;
  max-width: 1150px;
  align-items: center;
  color: white;
  margin-top: -20px;
}

.desciption {
  margin-left: 50px;
}
<div class="background">
  <nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">Certifications</a>
    <a href="#">Seesaw</a>
    <a href="#">Others</a>
    <div class="animation start-home"></div>
  </nav>
  <div class="Page_Title">
    <h1>RITHVIK VADDADI</h1>
  </div>
  <div class="arrow-wrap">
    <div class="arrow-down arrow"></div>
    <div class="arrow-down arrow"></div>
  </div>
</div>

<div class="About">
  <h2>About Me</h2>
  <div class="ABT">
    <img src="CSS/images/My PFP.jpg" alt="Avatar" class="Avatar">
    <p class="desciption">Hello, I am Rithvik Vaddadi, a current NSF with a diploma in Cyber Security and Digital Forensics. Drawn to the world of computers, I aspire to make people's lives easier and protect them from cyber attacks with the help of technology around us. As
      a problem solver, I am known to use my creative and critical thinking skills when providing solutions in my past leadership roles and projects. When involved in projects, I tend to notice people's strengths/weaknesses and assign them to roles where
      their potential would be fully maximized in the project. When my mind is fixed on a goal, I dedicate my energy and focus to achieving the goal.</p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Check if background image covers the entire container and then adjust its properties to avoid these gaps. Try this –

    background-size: cover; 
background-position: center;  
height: 100vh; 
margin: 0; 
padding: 0;

    and for your arrow thing, position it absolutely within the .background container then see.

    position: absolute;
    Login or Signup to reply.
  2. 0

    To make a webpage responsive, you need to use media query that you haven’t used at all.
    you can use like this :

    // for mobile device — you need to rewrite or update some css properties for some element

    @media only screen and (max-width: 600px) {
  nav{
font-size:20px
}}

    if you want smooth responsive page, you may need to add media query for tablet too:
    for using use min-width:600px and max width :1000px(depends upon size ,look for standard size )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search