Search code examples
htmlcsstextresponsivepadding

HTML text columns with different responsive padding in each column

I am helping out with some coding - which is not my fortay - and as part of a page, we are wanting to include and embed video and in a column to the right is a title for the video. I am using HTML columns to allow them to show underneath each other on mobile. But because I want the title to show vertically aligned in the centre of the video, the responsive version has a big gap due to the
I have had to use for the desktop version to look ok. I know this isn't the best way but I have tried using different padding in the .column styles, but because it appears to both, it's not giving me the look I need.

Is there any way of fixing this so there is a large padding on desktop but small-to-none on mobile?

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <iframe src="VIDEO URL" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="column">
    <center>
    <br><br><br><br><br><br><p class="rtecenter"><p style="font-size:24pt; color:#0060a9;"><strong>VIDEO TITLE </strong></p>
  </div>
</div>

</body>
</html>

Tried using the responsive style to add padding or trying to create a second column style but then the columns don't show floating next to each other.

Solution

  • Possibly do something like this?

    What I did was got rid of all the <br> you used to manually "center" the title and simply added some CSS to style the row in order to align the items in the center, then kind of "undid" it in the media query by setting the row to inline-block

    <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.row {
  display: flex;
  align-items: center;
}



/* Clear floats after the columns */


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .row {
    display:inline-block;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
<iframe src="VIDEO URL" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="column">
    <center>
    <p class="rtecenter"><p style="font-size:24pt; color:#0060a9;"><strong>VIDEO TITLE </strong></p>
    </center>
  </div>
</div>

</body>
</html>