Stacking a table with an image on mobile using html/css

user_10624737 0
Viewed 335

Very new to all this and playing around with having a two column button (of sorts) that will feature a coloured background with some text on one side and an image (which will also be a link) on the other.

I also want this to stack on mobile. I have had some success using other snippets of code found on here, but I can't get it quite right - mainly the left side of my 'button' doesn't fill the whole side.

There's probably a really simple solution, but I can't seem to find it right now!

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  align-content: center;
}

.row {
  max-width: 280px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <p>Some text..</p>
  </div>
  <div class="column">
    <img src="https://gallery.mailchimp.com/e31ffc7f9716689ceb3f1e8be/images/65235be8-d229-4c50-801e-36f5bccbf429.jpg">
  </div>
</div>

css-tables css html
2 Answers

You can spend a couple of hours fiddling around with various html/css settings, or you can take 20 mins and do a tutorial that will cover this and several other aspects.

For wizardly easy mobile stuff, take a look at Bootstrap. Here's a brilliantly speedy tutorial that will get you started. Basically, Bootstrap involves just a few files that you need to reference at the top of your page and voila, you have some pretty cool functionality. If you reference these three files (reproduced below) at the top of each page, you will have access to all the super-easy Bootstrap wonderfulness that will automatically handle the different screen sizes for you.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Also, another great thing to check into is Flexbox - this tutorial is worth every second of the 28 minutes.

Finally, look into CSS Grid. Sorry, I don't have a good reference for you but its easy to find some good tuts on that.

user_14475090

I would use flex rather than floats (the advantage is you get equal height columns):

* {
  box-sizing: border-box;
}

.column {
  width: 50%;
}

.column>img {
  width: 100%;    /* just makes the image resize to the column */
  display: block; /* removes space below image */
}

.row {
  max-width: 280px;
  display: flex;   /* use flex instead of floats */
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;  /* change direction of flex to columns at small screen size */
  }
  .column {
    width: 100%;              /* make column full width */
  }
}
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <p>Some text..</p>
  </div>
  <div class="column">
    <img src="https://gallery.mailchimp.com/e31ffc7f9716689ceb3f1e8be/images/65235be8-d229-4c50-801e-36f5bccbf429.jpg">
  </div>
</div>

user_17909820
Related