Having buttons side by side

dipanjan94dipanjan94 MumbaiRegistered Users Posts: 73 Big grins

I have two buttons on this page https://www.dipanjanpal.com/Workshop/Introduction-to-Aerial-Photography which are "Book Batch 1" and "Book Batch 2" in the workshop details highlight container. However, I want to have both the buttons side by side and not in separate lines - I couldn't do that.

Can anyone help me out with the html/css codes related to that? Thanks in advance!

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,264 Major grins

    Remove your current HTML/CSS content and use this instead.

    HTML

    <div class="highlight-container">
    
      <h2><b>Workshop Details</b></h2>
    
      <p class="venue"><b>Venue:</b> The workshop will be conducted over a Zoom video call. The link to join the zoom call will be shared with you 24 hours before the workshop is scheduled to begin.</p>
    
      <div class="date">
        <p><b>Date:</b> 21st February</p>
        <p><b>Batch 1 Time:</b> 10AM - 12 AM IST (GMT +5:30)</p>
        <p><b>Batch 2 Time:</b> 5PM - 7PM IST(GMT +5:30)</p>
      </div>
    
      <p class="price"><b>Price:</b> ₹999/- per person (~ $15)</p>
    
      <div class="buttons">
        <a href="https://imjo.in/eJJFKW" class="button">Book Batch 1</a>      
        <a href="https://imjo.in/XRCE6c" class="button">Book Batch 2</a>
      </div>
    
    </div>
    

    CSS

    .highlight-container {
      background: #e8e8e8;
      padding: 25px 20px;
      color: #000;
      text-align: left;
    }
    
    h2 {
      text-align: left;
      margin-bottom: 15px;
    }
    
    p {
      font-size: 18px;
      line-height: 1.5;
    }
    
    .venue,
    .date,
    .price {margin: 0 auto 20px;}
    
    .buttons {
      display: flex;
      justify-content: space-between;
    }
    
    .button {
      display: inline-block;
      padding: 17px 32px;
      background: rgba(0, 0, 0, 1);
      border: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      border-radius: 100px;
    }
    
      .button:hover {background: rgba(0, 0, 0, 0.6);}
    
    @media (max-width: 736px) {
    
      h2 {
        font-size: 20px;
        text-align: center;
      }
    
      p {
        font-size: 17px;
        line-height: 1.5;
      }
    
      .sm-user-ui .sm-tile-info .sm-tile-title {
        font-size: 4px;
      }
    
      .button {
        padding: 13px 24px;
        letter-spacing: 1px;
        font-weight: 400;
      }
    
      .hightlight-container {
        padding: 10px 5px;
        text-align: left;
      }
    
    }
    

    That should get you pretty close. I removed the <br> and added some classes and margins instead.

Sign In or Register to comment.