My responsive gallery is malfunctioning. What steps can I take to ensure that the cards become more responsive

I've been following a tutorial from W3 to create a gallery view, but the layout looks terrible on mobile devices. It squeezes three cards into each row and shrinks them down.

I checked out Bootstrap's documentation on containers and tried using the "container-md" class, but it didn't make the layout responsive as I had hoped. It still kept three cards per row.

Next, I attempted to remove some CSS that was forcing the columns to be equal widths:

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

However, this change resulted in only one large card per row and seemed to mess up the sorting buttons as well.

If you'd like to take a look at my full code and CSS, feel free to visit:

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To enhance the responsiveness of the row element, consider including classes 

row row-cols-1 row-cols-sm-2 row-cols-md-3
within it. This will optimize the layout for various screen sizes. For more information, refer to the official documentation.

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

Tips for incorporating a zoom feature into a bootstrap carousel

I've been attempting to incorporate a zoom effect into a bootstrap carousel, but for some reason, I can't seem to get it to work :( I suspect that I may need to insert the syntax into the core _carousel.scss file (or maybe not?). Despite my atte ...

jqueryhtmlcsssassbootstrap-4

Encountering a problem with fetching data in a dropdown using a hidden select in MVC 4 Razor and Selectpicker

I need to show my hidden select data in dropdown-menu inner selectpicker ul with the default "--choose--" option selected. ASP.NET MVC Razor Syntax @Html.DropDownListFor(model => model.BrandName, Model.CompanyItems, "--Choose Brand--", new { @id = "B ...

javascriptcssasp.net-mvc-4bootstrap-modal

Change the Label in a TextField Component with Material UI

How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI? To view the solution, please visit this CodeSandbox link: CLICK HERE Label Customization Issue: https://i.sstatic.net/1 ...

cssreactjsmaterial-uijss

How to position and center a div layer over another div

I have been struggling to place a div over another div that contains an image. The div needs to have a simple HTML link just like the example shown in this picture: However, when the page loads, the URL is not centered on the image as you can see on the l ...

csshtmlalignment

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

How can I create a responsive navigation bar in Bootstrap that displays a menu button and collapses the list items when the browser is resized?

I am looking to create a navigation bar that transforms into a menu button and collapses when the browser window is minimized. I would like it to function similarly to the one found at . While I have searched for tutorials, most only cover how to create ...

htmlcsstwitter-bootstrap

Why are there no borders around the rows and columns of my table?

I'm just starting to learn HTML so I appreciate your patience with what may be a basic question for some. After creating a table using , I've noticed that there are no visible lines separating the cells. Is there a way to add lines around the ce ...

html

Vertically align the text within an `<li>` element that has an unspecified height

Struggling with creating responsive proportional rectangles for my gallery. It was working fine until I tried to center the text vertically, but couldn't figure out how to do it while maintaining proportional resizing. Any help or advice would be grea ...

htmlcsscenteringimage-gallery

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...

htmlcssweb

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

Using Grails 2.1.1 with the resources plugin, I have encountered an issue when incorporating the jstree library which comes with themes configuration: "themes":{ "theme":"default", "dots":false, "icons":true } The JavaScript in the library locat ...

javascriptcssgrailsjstree

JavaScript code that generates a variable output

Hi there, I'm currently working on a project where I need to update some data using a dropdown box. My goal is to create a function that returns the variable ds or ds1 based on the user's selection. For example, if they choose "ds" from the dropd ...

javascripthtml

Manipulate classes for buttons in a React component by adding or removing them

I'm attempting to create two buttons that will toggle their class when clicked. When button one is clicked, it should add the "active" class to itself and remove the "active" class from the sibling button. I've made some progress, but I'm e ...

htmlcssnode.jsreactjs

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

phphtmlcsslaravel

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...

htmlangularformssplit

Using JQuery to create a checkbox with dual functionality within a function

I'm struggling to create a versatile checkbox that will toggle the display of a div from none to block when checked, and back to none when unchecked. I attempted to implement a conditional statement: $("#customCheck1").on("change", function() { if ...

javascriptjqueryhtmlcssbootstrap-4

Creating dynamic divs and images in real-time - Visual Basic

I have a list of users in a database with their usernames and profile images. My goal is to dynamically generate a new div element for each user, containing a label for their username and displaying their image. I've started working on it using the fo ...

htmlasp.netvb.netwebformsasp.net-3.5

Is there a way for me to extract information from the subsequent pages of the posts I've already collected?

My journey into programming started nearly a year ago, and I consider myself a novice in the field. Currently, I am engrossed in developing a Django web application that scrapes posts and then navigates through the hyperlink of each post to extract the bod ...

pythonhtmldjangoweb-scrapingbeautifulsoup

In Bootstrap 4.1, the last child in an input group may lose its rounded corners when validation is applied

Have you noticed that in Bootstrap 4.1, the last child in an input group loses its rounded corners when validation is involved? You can refer to this example of custom styles for more information. Do you know of any elegant workarounds for this issue? ...

twitter-bootstrapbootstrap-4

What is the best way to bridge the gap between the rows?

After combining the top and bottom blocks, I now have a gap in my layout. Is there a way to move this row up without causing any issues? I need assistance with resolving this problem using Bootstrap. <link rel="stylesheet" href="https://maxcdn.boots ...

csstwitter-bootstrap-3

The reason why the div appears below the image

Is there a way to position the div above the image rather than below it, even when setting the z-index attribute in the code? The current code structure is as follows: <main id="content" role="main"> <div style="text-align: center"> & ...

htmlcssbootstrap-4