why images are going off the page, and no other content is

Question

I have a section that is all p and img elements, they both line up at the same place, but the img will go off screen while the p does not. I have box-sizing:border-box in my body css, I've tried adding justify content and align items, I've added the width:100% and overflow:auto, and none of it seems to fix it, not sure what I am messing up. Thank you for any help. I should also mention it is mainly a smaller mobile window I am trying to make this work for, as I have media queries for larger screens.

#story{
 background: linear-gradient(#4B7992, #090D19);
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 
}

#story h1{
 flex:100%;
 padding:30px 0px;
}
 
#story h2{
 background: #4B7992;
 padding: 20px 15px 30px;
 text-align: center;
 
}

#story img{
 padding: 30px 80px 20px;
 width: 100%;
 overflow: auto;
}

#story p {
 padding:15px 80px 16px;
 line-height: 30px;
}

<section id="story">
  
  <h1>THE STORY</h1>
  
  <h2>From the creators...</h2>
  
  <article>
  
   <img src="images/story1.png" alt="Story 1">

   <p>Based on ....</p>

   <img src="images/story2.jpg" alt="Story 2">

   <p>More....</p>

   <img src="images/story3.png" alt="Story 3">

   <p>End...</p>
  </article>
 </section>

try setting the img width to auto. You can also try setting overflow to hidden — DCR, Dec 19 '19 at 20:02
Replace your images for the example with a url-based placeholder image so others can see the effect. Example: `` — chris, Dec 19 '19 at 20:02

score 0 · Answer 1 · answered Dec 19 '19 at 20:10

0

Change your #story img width to a calc() value to accommodate for the 80px padding that is pushing it over.

#story img{
    padding: 0px 80px 0px;
    width: calc(100% - 80px);
    overflow: auto;
}

answered Dec 19 '19 at 20:10

chris

789
4
16

why images are going off the page, and no other content is

1 Answers1