Images within a row element do not decrease in size when the screen is resized

I am in the process of creating a small website aimed at helping my daughter (and other children) learn new words.

The illustration demonstrates how I envision the website looking across all types of devices.

My initial attempt was based on a template and appears visually appealing on larger screens. However, I encountered an issue on smaller devices where the three buttons below the image did not scale down properly. They ended up being displayed as separate images in a vertical alignment.

Due to my limited expertise as a beginner and the complexity of the template, I attempted to create a layout from scratch but faced the same problem as evident in this link here.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfabb1a9b1af">[email protected]</a>/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>

If anyone could provide guidance on resolving this issue without resorting to complex media queries, it would be greatly appreciated. I am concerned that delving into media queries may be too daunting for me.

Thank you in advance for any assistance! Sincerely, Rolf

htmlcsstwitter-bootstrap

Answer №1

Ensure that you specify column settings for both small and extra-small breakpoints in your code. Simply replace col-sm with col. By default, columns will expand to full width on mobile devices. Check out the grid documentation for more details.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3879d859d83">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining IDs of Divs that have been Dragged into a Drop Zone upon Clicking a Button using JavaScript

I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...

javascriptjqueryhtmlcss

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

javascriptjqueryhtml

AMP causing distortion in images

My images are stretching on this page and I cannot figure out the cause. Any help would be greatly appreciated. The issue seemed to arise after I implemented Bootstrap, but I am using a customized version of Bootstrap that only includes grid system and fo ...

cssvue.jsamp-html

Construct an HTML tag as a string using Jsoup

I'm faced with an element like this: <p> I am lost </p>` My task is to highlight "am" as follows; <p> I <mark style="background-color:#FFFF00;">am</mark> lost </p> This is my code: String newText = "I <mark ...

javahtmljsoup

Can you explain why the .js code is causing such high CPU usage in popular video players?

Why is the .js code running continuously even when the video is paused and there is no user interaction? I observed this phenomenon on a Windows 10 Atom Tablet, particularly when in energy-saving mode. The CPU usage for video playback and decoding almost ...

javascripthtmlhtml5-videoprofiling

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

javascripthtmltypescript

Bootstrap sliders stagnant and unresponsive

I am encountering an issue with my bootstrap carousel slide. I have configured the buttons and set it to slide automatically, but for some reason, the carousel is not moving when I click on the buttons. I can't figure out what mistake I might be makin ...

htmlcssbootstrap-4

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

I'm in the process of developing a new website, and I'm still learning about PHP. Would it be more advantageous to use .html pages where buttons with Onclick would trigger JavaScript functions that redirect to a PHP page for database interaction ...

phphtml

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...

htmlcss

Bug with the square corners of Bootstrap input fields

Currently working on a website (using Bootstrap) that includes a registration form. When adding validation feedback divs, I noticed that the right-hand corners of each input field are appearing squared instead of rounded like the left-hand corners. Here i ...

twitter-bootstrapbootstrap-4

Stop CSS Grid cell from causing vertical expansion of cells in adjacent columns

I believe that visual aids are more effective than text in illustrating the issue: My Objective https://i.sstatic.net/vBAsI.png Current Situation Looking at the example, you can see that the title and description expand equally to accommodate the gallery ...

cssflexboxcss-grid

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

javascripthtmlchartszingchart

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax() Here's my HTML: <div id="waiting_div"></div> This is the CSS: #waiting_div { position: fixed; top: 0px; left: 0px; height: 100%; ...

javascriptjqueryhtmlcssajax

What is an alternative method to interact with elements in Selenium besides using Driver.get?

I am currently working on a code to automate joining a google meet. The process involves signing into my google account, which is successful until I reach the "Verify that it's you" stage (image 1). When I attempt to use driver.get, it redirects me ba ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

What is causing compatibility issues between html5lightbox and angular?

After integrating angular.js into my project, I encountered an issue with html5lightbox not working as expected. Instead of opening images and PDF files in a lightbox, clicking on a link takes me to another page. var app = angular.module('MyApp&apos ...

javascriptjqueryhtmlangularjslightbox

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

csstableviewjavafx-8

How does one retrieve the parent id of an anchor tag with prototype?

Event.observe(window, 'load', function() { $$('a.tag_links').each(function(s) { //alert(s.parent.parent.id); //How to get id of its parent to parent }); } ); I am trying to retrieve the id of the parent element. The ...

javascripthtmlprototypejs

Switching page upon submission while utilizing iFrames

I am facing a challenge on my website with an iFrame element that contains a form. After users answer some questions and submit the form, I want the page to automatically redirect to a thank you page. Unfortunately, I'm having trouble making this work ...

htmlcssvue.jsiframenuxt.js

Make the table in a bootstrap design appear with a border when you hover over a cell using the table

Looking for a solution to make the border work as expected when hovering over each td in a table like this example: https://jsfiddle.net/nmw82od1/ Here is the CSS code: .table1 td:hover { border: 1px solid black; } .table2 td:hover { border: 1px do ...

javascriptcsshtml-tablebootstrap-4