My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and eventually on mobile, I'd like to display just 1 product. I consulted Bootstrap's documentation on the Grid System and Rows here and attempted to use the row-cols syntax, but unfortunately, nothing seemed to change. I am certain that I am missing something crucial, but I am unable to pinpoint the issue. Additionally, in the CodePen project that I've shared, the product information (image and text) seems to get squeezed.

If you'd like to take a look at my CodePen project, you can find it here.

Here is how the layout appears on my computer in desktop view (looking good):

And here is how it appears on my computer when I reduce the screen size, resulting in a less than optimal display:

htmlcssbootstrap-4grid-layout

Answer №1

Edit this version to create your grid layout, ensuring that you utilize Bootstrap 4.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6 col-md-2">customize</div>
        <div class="col-sm-6 col-md-2">your</div>
        <div class="col-sm-6 col-md-2">own</div>
        <div class="col-sm-6 col-md-2">grid</div>
        <div class="col-sm-6 col-md-2">layout</div>
    </div>
</div>

Answer №2

The solution provided above is spot on:

Here's a suggestion: Create two different bootstrap layouts for showcasing your products - one tailored for larger screens and another for smaller screens. On the smaller screen layout, you can choose to display either 3 rows or 2 rows based on your personal preference. However, it is essential to keep the small screen layout hidden initially. To achieve this, incorporate a media query into your CSS code that will hide the larger screen layout and reveal the small screen layout once the specified breakpoint is reached.

Answer №3

One effective way to handle responsive design is by utilizing media queries to set breakpoints. By establishing these breakpoints, you can determine the layout of rows and columns based on the size of the screen, allowing for a more adaptable and user-friendly experience.

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

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

cssflexbox

What is the best way to maximize the width of this element?

Check out my website: There's a div styled with the color #D9D9D9 This is the CSS code: #full_bar { background: #D9D9D9; width: 100%; height: 100px; } I want the div to span across the full width of the website and be stuck to the footer. An ...

htmlcsswordpress

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor

Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...

css

The switch case functionality refuses to change when I interact with the user interface

Can someone please help me troubleshoot? I'm not receiving any errors in the Chrome console. HTML <div class="wrapper"> <i id="repeat" class="fas fa-stop-circle"></i> </div> Javascript const wrap ...

javascripthtml

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

csshtml

Issue with Laravel Blade: HTML elements are not being displayed in my blade template file

After implementing WYSIWYG fields in my form, I noticed that the html tags are not being properly rendered upon retrieving the data. The HTML tags still appear in their raw form within the form itself. Attempting solutions found on this thread, I believed ...

phphtmllaravelwysiwyg

HTML code now launches in the existing electron window rather than opening a new window

<html> <head> <title></title> </head> <input type="button" name="new" id="newmon" value="new"> <button onclick="open1()">monitor 1</button&g ...

javascripthtmlnode.jselectron

Making a floating action button in Ionic

I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...

cssangularjsionic-framework

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

javascripthtmljson

Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration. This is ...

htmlcsstwitter-bootstrapgridview

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

htmlcss

Ways to determine the number of overlapping elements and adjust their widths

My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and the ...

htmlcssbootstrap-4flexbox

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

htmlcss

Creating a table using Jade/Express.js that displays various elements in each row

Looking to create a dynamic table layout using Jade for an array of objects where three objects are displayed on each row. <table> <thead>...</thead> <tbody> <tr> <td>obj0</td> <td>obj1 ...

htmlnode.jsexpresshtml-tablepug

When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

I am attempting to reposition the label above the input field when it is focused, but instead it becomes hidden. label > span::focus { top: -20px; font-size: 15px; color: blue; } Check out the complete Html & CSS code. Update: ...

htmlcss

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

Contact form script malfunctioning, showing a blank white page

Encountering a white screen when trying to submit my contact form with fields for Name, Email, Subject, and Message. I am looking to receive emails through my website. I have double-checked all variable names and everything seems to be correct. Since I am ...

phphtmlcssformscontacts

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

javascripthtmljquerycssevents