Responsive images in row element do not scale down

user_16450548 0
Viewed 29

I'm trying to build a small website for my daughter (and other kids) to learn words.

The picture shows how the website should look like on all devices.

Website Layout

My first attempt is this one (started from a Template) and on devices with a big screen it looks good. My problem is, that on smaller devices my three buttons below the picture won't scale down. They got line broken and shown as three images among each other.

Because I'm a complete beginner and the Template is a bit too complicated for me to understand it in full I also tried to build the layout from scratch on my own but I come to the same problem as you can see here.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container" id="wrapper">
  <div class="row" id="picture">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/replay.webp"></picture>
      </div>
      <div class="col-sm">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/play_item_sound.webp"></picture>
      </div>
      <div class="col-sm">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/next.webp"></picture>
      </div>
    </div>
  </div>
</div>

Can please anyone point me in the right direction how I can fix that? I'm a bit afraid that i maybe have to use media queries which look way complicated.

Best regards and thank you for any help! Rolf

twitter-bootstrap css html
1 Answers

You're setting the columns for the small breakpoint, but not for extra small. Just change col-sm to col. Default behavior is for columns to go to full-width for mobile. See the grid docs for more.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container" id="wrapper">
  <div class="row" id="picture">
  </div>
  <div class="container">
    <div class="row">
      <div class="col">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/replay.webp"></picture>
      </div>
      <div class="col">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/play_item_sound.webp"></picture>
      </div>
      <div class="col">
        <picture><img class="img-fluid" src="https://www.schmellerling.de/assets/images/next.webp"></picture>
      </div>
    </div>
  </div>
</div>

user_12648040
Related