The Bootstrap col-sm-6 class is not functioning as expected on mobile devices

I have been organizing products from a SQL table into 

<div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 main_item_div mt-4 mb-4">
divs.

The issue I am encountering is that on mobile devices, the col-sm-6 class does not seem to be functioning properly. The products are consistently displayed one below the other instead of two divs side by side.

If you want to see this problem in action, you can visit my website at this link

You can find these divs under the "Újdonságok, akciós termékek" title section.

Your feedback and assistance would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Hello there!

<div class="col-6 col-lg-3 main_item_div mt-4 mb-4"></div>

col-sm styles are meant for viewport sizes ≥ 576px, so in this scenario, it is advisable to use col. Additionally, there is no need to include both col-lg-3 and col-xl-3 classes as Bootstrap's media queries are based on minimum width - therefore, just keep the col-lg-3 for larger displays.

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

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

htmlcssflexbox

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

Instructions for utilizing the nav-pill with nav-justified components in Bootstrap3x without incorporating any responsive capabilities

I'm eager to incorporate this into my project : <div class="container"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#"> ...

jqueryhtmlcsstwitter-bootstrap-3

Slick carousel div interfering with Bootstrap 4 Modal functionality

After extensive searching and debugging, I discovered that the bootstrap modal is not displaying inside the slick carousel div. It only shows a gray background. Here is the code: The code retrieves details from the database and uses slick to display image ...

phpjquerytwitter-bootstrapbootstrap-4slick.js

Creating a unique carousel design using only CSS in Bootstrap

Trying to create a CSS effect to enhance Bootstrap, I noticed that it only works correctly when clicking the right arrow. Whenever I click the left one, nothing happens. I'm not sure where I made a mistake, can anyone help me spot it? Thanks in advanc ...

csstwitter-bootstrap

inject spinner during the call and verify status post-call

How can I make the loading icon display during the save function call and then switch to the check mark icon after the function resolves instead of mocking it on a timeout? function save() { successMessage() new Promise((resolve, reject) => { setTim ...

javascripthtmlcssfunction

Varied approaches to managing responsive layouts

I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...

javascriptjqueryhtmlcss

Reveal and Conceal accordion elements

https://i.sstatic.net/y4KNM.png I am looking to create an accordion effect similar to the one shown in the image. When a lesson is completed, it should hide and display the next lesson in line. Additionally, I want to ensure that only one accordion remain ...

javascriptbootstrap-4laravel-8

Use of absolute positioning resulted in the disappearance of the element

Can anyone assist with resolving the issue I am encountering? I currently have three nested divs as follows: <div class="section"> <div class="parent"> <div class="child"> Some random text. </div> </div> </div> To adj ...

javascripthtmlcss

Reverse the impact of the preceding CSS directive

In this screenshot example, the padding at the bottom in Material-UI has been increased from 16px to 24px using the CSS rule below: .MuiCardContent-root:last-child { padding-bottom: 24px; } https://i.sstatic.net/IWaIu.png I want to revert it back to ...

cssreactjsmaterial-ui

Automatically fill in form fields with data from a JSON file as soon as the user enters a value

How can I retrieve the bank name, branch, city, and district from a JSON array? Below is the contents of my results.json file: { "ifsc": [{ "ifsc": "PUNB0000100", "bank": "PUNJAB NATIONAL BANK", "city": "ABOHAR ...

javascriptjqueryhtmljson

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

javascriptcssreactjsreact-routerreact-router-dom

Having trouble retrieving the date from the Bootstrap WTForm

I'm currently utilizing WTForm and bootstrap to collect the date input from a user. The page is loading correctly with the form to input a date, but when I click on a date and hit submit, the print(form.dmrDate.data) statement returns None. It seems ...

pythonbootstrap-4datetimepickerflask-wtforms

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Tips for preventing duplicate content in bootstrap

I want to showcase a clickable phone number on my website for mobile users. Here's the code snippet: class MyGrid extends React.Component { constructor(props) { super(props); this.state = { phone: "123" }; } render() { return ( ...

reactjsbootstrap-4react-bootstrap

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

What's the best way to adjust the height of a textarea to completely fill the column?

Currently, I am in the process of creating a simple contact form using Bootstrap-4. The layout consists of 1 row with 2 columns: the left column contains input text fields and selection menus, while the right column includes a textarea. The challenge I&apo ...

htmlcssbootstrap-4flexbox

Tips for deleting a duplicate identifier within an li element that possesses a particular class through javascript

I need help removing duplicate IDs from list items with a specific class. For example, in the following list, there are duplicates IDs (small, medium) and I want to remove the IDs with the class "size". How can I achieve this? <ul id="bulk"> ...

javascripthtmljquery

Enhance your Underscores Wordpress Theme by incorporating a secondary sidebar option

Started a new Wordpress site using the Underscores theme (_s) Successfully added one sidebar, but now looking to add a second one with different widgets on the same page. After adding the new sidebar to the functions.php file and seeing it in the Wordpre ...

phphtmlwordpressthemessidebar

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss