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

Flexbox pushed out of page to the right – how to position under banner in HTML/CSS?

can someone please teach me how to fix this error in my code, I’m quite new and can’t seem to find any info on it on the internet. I was trying to make my flexbox be right below this banner, but for some odd reason, the flexbox is pushed out of the page to the right and is not visible unless scrolled to said right. Anyone know how I can place this flexbox in the middle of the screen and under the banner because I am clueless on what I did wrong.

Images:

What page looks like when open

When scrolling to the right

HTML:

<div class="banner">
  <p class="large">Features</p>
  <p class="below-large">What Do We Bring to the Table?</p>
  </div>
  
  <div class="reasons">
    
    <div class="firstColumn">
    <p class="first">No Login</p>
    <img class="firstIcon"src="lock_icon.png">
    <p class="firstDesc">No need to fear that your information will be stolen and waste time logging in when our tests are open to anyone.</p>
    </div>
    
    <div class="secondColumn">
    <p class="second">Accuracy</p>
    <img class="secondIcon" src="target.png">
    <p class="secondDesc">Our tests are deadly accurate and will release answers that have been meticulously chosen by our algorithims.</p>
    </div>
    
    <div class="thidColumn">
    <p class="third">Ease</p>
    <img class="thirdIcon" src="smile.png">
    <p class="thirdDesc">Our tests are easy to access and easy to follow, so we can reach as many people as possible.</p>
    </div>
    
  </div>

CSS:

/*Banner*/
.banner{
  padding-top: 100px;
  padding-left:20px;
  padding-bottom: 100px;
  color: white;
  display:block;
  box-sizing: inline-box;
  width: 100%;
  float: left;
  background-image: url('banner-backgrounds.png');
  
}
.large{
  font-size: 56px;
  font-weight: bold;
  color: white;
}
.below-large{
  font-style: italic;
  font-size: 30px;
}

/*Reasons*/
.reasons{
  padding-top: 400px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.firstColumn{
  flex-direction: column;
}
.first{
  font-weight: bold;
  font-size: 30px;
}

.secondColumn{
  flex-direction: column;
}
.second{
  font-weight: bold;
  font-size: 30px;
}

.thirdColumn{
  flex-direction: column;
}
.third{
  font-weight: bold;
  font-size: 30px;
}

I applied some padding to the top and if not there, it would be directly to the right of the banner, off screen. Any help is appreciated.

Tags:

2

Answers


  1. 0

    Please go through this link https://www.w3schools.com/css/css3_flexbox.asp to understand how you can implement flexbox properly. Other than that Image size can cause overflow so make sure to use the images of proper size. If you’re unable to do that, add the overflow-x:hidden; to the parent container of your image.

    Hope that helps!
    Thanks

    Login or Signup to reply.
  2. 0

    I edited your code with comments of what was wrong:

    • note: I deleted the src attribute of the images for demo purpose
    /*Banner*/
.banner{
  padding-top: 100px;
  padding-left:20px;
  padding-bottom: 100px;
  color: white;
  display:block;
  box-sizing: inline-box;
  /*float:left; deleted, causing the banner to be to the left of the flex box  */ 
  /*width: 100%;  replaced with width:auto, to not cause overflow */
  width:auto; /*added*/
  background-image: url('banner-backgrounds.png');
}
.large{
  font-size: 56px;
  font-weight: bold;
  color: white;
}
.below-large{
  font-style: italic;
  font-size: 30px;
}

/*Reasons*/
.reasons{
  /* padding-top: 400px; optionally deleted, why so much padding? */
  text-align: center;
  display: flex;
  flex-direction:raw; /* this is the default value of flex-direction */
  justify-content: space-between;
  align-items: center;
  flex-wrap:wrap; /*added for a responsive layout the column will jump to the next line when the screen is smaller */
 }
 
.reasons>*{ /*added to control flex children size*/
  width:30%; /* 30% 30% 30%  + 10% space */
  min-width:200px; /* choose your min-width for the children */
}

.firstColumn{
  /* flex-direction: column;  deleted, flex-direction is for the parent flex-box*/
}
.first{
  font-weight: bold;
  font-size: 30px;
}

.secondColumn{
    /* flex-direction: column;  deleted, flex-direction is for the parent flex-box */
}
.second{
  font-weight: bold;
  font-size: 30px;
}

.thirdColumn{
   /* flex-direction: column;  deleted, flex-direction is for the parent flex-box */
}
.third{
  font-weight: bold;
  font-size: 30px;
}
    <div class="banner">
  <p class="large">Features</p>
  <p class="below-large">What Do We Bring to the Table?</p>
 </div>
  
 <div class="reasons">
    
    <div class="firstColumn">
    <p class="first">No Login</p>
    <img class="firstIcon" alt="img">
    <p class="firstDesc">No need to fear that your information will be stolen and waste time logging in when our tests are open to anyone.</p>
    </div>
    
    <div class="secondColumn">
    <p class="second">Accuracy</p>
    <img class="secondIcon"  alt="img">
    <p class="secondDesc">Our tests are deadly accurate and will release answers that have been meticulously chosen by our algorithims.</p>
    </div>
    
    <div class="thidColumn">
    <p class="third">Ease</p>
    <img class="thirdIcon" alt="img">
    <p class="thirdDesc">Our tests are easy to access and easy to follow, so we can reach as many people as possible.</p>
    </div>
    
</div>

    recommended video of Kevin Powell about flex-box :
    https://www.youtube.com/watch?v=u044iM9xsWU

    if you have any questions feel free to comment

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

Back To Top
Search