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

Html – Adding spacing between two vertical columns while maintaining responsiveness

I have code here
https://codepen.io/gg-the-solid/pen/eYQKBZd

.youtube-video {
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.column {
  float: left;
  width: 50%;
  flex: 1;
}

.columns {
  display: flex;
  gap: 24px;
}

Where the youtube video on the left is responsive to be 100% of its columns width. I am trying to get a spacing of 32px between the two columns.

I have tried gap: 32px as well as padding-left: 32px; on the right column however doing that collapses the table.

Tags:

2

Answers


  1. 0

    One solution is to create a new div element that wraps all the content inside the right column and then add padding separately like so:

    <div class="column">
    <div class="gap">
        enter code here
    </div>
</div> 

    .gap {
  padding-left: 32px;
 }
    Login or Signup to reply.
  2. 0

    You just have to update your html, set the class of top div to columns and rename the youtube parent class to column. Your CSS is correct.

    <div class="columns">
    <div class="column">
        <iframe class="youtube-video" src="https://www.youtube.com/embed/5kW0RtcJZC8" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </div>
    <div class="column">
        <h3 style="font-size: 36px; letter-spacing: -1.2px; font-weight: bold;">text here</h3>
        <p style="font-size: 16px; letter-spacing: 0.008px;"><span style="color: #828282;">text here</span></p>
        <dl>
            <dd>text here</dd>
            <dd>text here</dd>
        </dl>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search