Consistent Section Length

vividvisuals

Hey all,

Website in question is:
www.alexanderstephanphotography.com

I sort of repurposed a fix that I got through this forum a while ago to create a floating 3-column section on my home page which looks great when at standard screen sizes:

But not so much when the screen size is adjusted.

Is there a way to adjust the code so that the white text box scales equally between the three columns as the screen size is adjusted?

Thanks as always for your help,

-Alex

Hikin' Mike

Not by using three HTML/CSS boxes, but just one.

HTML:

<div class="container">

  <div class="text-box">  
    <h2>PROFESSIONAL</h2>
    <div class="photo">
      <img src="https://photos.smugmug.com/photos/i-5C7F4jZ/0/359cb6b2/M/i-5C7F4jZ-M.png" width="150px"> 
    </div>
    <p>I approach everything I do with the mindset that it should be done right. In photography this translates into professionally executed images that are thoughtfully composed and edited to be both polished and realistic.</p>
  </div>

  <div class="text-box">  
    <h2>EXPERIENCED</h2>
    <div class="photo">
      <img src="https://photos.smugmug.com/photos/i-8T3L2Bz/0/1027b4ba/M/i-8T3L2Bz-M.png" width="150px"> 
    </div>
    <p>With more than a decade as a professional photographer, I'm also a professional marketer which helps me understand not only how to take great photos, but to ensure that photos benefit your brand.</p>
  </div>

  <div class="text-box">  
    <h2>FLEXIBLE</h2>
    <div class="photo">
      <img src="https://photos.smugmug.com/photos/i-9VdJjpB/0/ea965591/M/i-9VdJjpB-M.png" width="150px"> 
    </div>
    <p>A love for creative challenges means that I can also be very flexible. I approach every project individually and draw upon both my professionalism and experience to ensure the delivery perfection every time.</p>
  </div>

</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgba( 255,255,255,1 );
}

.text-box {
  padding: 30px;
  margin: auto;
  text-align: center;
  width: 30%;
}

.text-box P {text-align: left;}