Consistent Section Length

vividvisualsvividvisuals Registered Users Posts: 30 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited March 13, 2021

    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;}
    
Sign In or Register to comment.