Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product photo and details without scrolling?

<div class="col-md-9 col-sm-12">

<div id="product_details_info">
  <div class="container-fluid">
    <h3 class="h2-title">Product Details</h3>
    <div class="row">

        <div class="col-md-6 col-sm-4 py-2">
            <div class="card h-100 card-body border-0 shadow">
              <img class="shadow d-block w-100" style="object-fit: none;height:450px;" src="{{asset('img/electrical.jpg')}}" alt="First slide">
            </div>
        </div>
        <div class="col-md-6 col-sm-4 py-3" id="order_now_section">
          <div class="card h-100 border-0 shadow">
              <div class="card-body" style="text-align:center;">
                <h3 class="product-title" style="font-family: 'Piedra', cursive;font-size:35px;text-align:center">men's shoes fashion</h3>

                <h5 class="quantity" style="font-family: 'Sriracha', cursive;">quantity</h5>

                <input type="number" class="form-control form-control-sm form-control-warning" style="width: 50%;margin:auto;text-align:center;" min="0">

                <h5 class="" style="font-family: 'Sriracha', cursive; padding-top:20px;">price</h5>
                <h5 class="" style="font-family: 'Sriracha', cursive;padding-bottom:10px; font-weight:bold;font-size:20px;">100 BDT</h5>
                <div class="action">
                  <a href="{{URL::to('/products/product_details')}}" type="button" class="btn btn-outline-info" style="font-weight:bold;"><i class="fas fa-cart-plus"></i>&nbsp Order Now </a>

                  <a href="{{URL::to('/products/product_details')}}" type="button" id="heart_id" class="btn btn-outline-info" style="font-weight:bold;"><span class="fa fa-heart"></span> </a>

                  <h3 class="product-title" style="font-family: 'Piedra', cursive;font-size:20px;padding-top:20px;text-align:center">Product Details</h3>
                  <p class="product-description" style="font-family: 'Raleway', sans-serif;">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! </p>
                </div>
              </div>
          </div>
      </div>
    </div>
  </div>
  </div>
 </div>
htmlcssbootstrap-4

Answer №1

By adding col-xs-4, the layout will be optimized for mobile devices with a width less than 576 pixels.

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

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

javascripthtmlangularjsangular-formly

Can the <br> tag affect the layout in terms of horizontal space?

I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...

htmlcss

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area. Here is my HTML Button code: <label class="switch" isValue="0"> ...

javascripthtmlcss

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

htmlcss

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

javascriptcssreactjsbootstrap-4material-ui

Included Image Hyperlink with Limited Clickability in HTML

When trying to turn my image into a hyperlink, I enclosed it with the tag. Oddly enough, only the lower portion of the image is responsive as a link. The upper part seems unresponsive. Here's the code snippet I used: <a href="link-here"& ...

htmlimagehyperlink

Creating an Interactive Table Using HTML, JavaScript, and PHP?

After reviewing this project, I am looking to customize the js function in relation to my own table. The key focus is on the following code: $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text&apo ...

javascriptphphtml

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

csstwitter-bootstraphtml

Hide the burger menu when a link is clicked

Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can any ...

javascripthtmlcssmenubootstrap-5

Implement real-time reporting functionality in Selenium

I have been working on implementing a run-time reporting mechanism for my automated test cases created using Java with Selenium and TestNG. The test results and details are stored in a MySQL database. Although I can successfully insert the test results in ...

javahtmlcssselenium

Is it possible to create a replicating text box in AngularJS that multiplies when entering input

I am experimenting with creating a sequence of text boxes that dynamically generate new empty text boxes as the user enters information into each one. Each text box is required to have an ng-model value associated with it, and they should all be generated ...

javascripthtmlangularjs

Can you explain the expected behavior of the ::before and ::after pseudo-elements when used with the <details> element?

I observed that the <details> element is rendered differently in Chrome and Firefox. Take a look at the code sample below. According to the HTML Standard: The first summary element child of the details element represents the summary or legend of the ...

htmlcsspseudo-element

Arranging the elements in my footer for optimal display

My footer layout expands and the lists in each column become misaligned as I add more links to it. I want to make sure that the lists for each column are aligned horizontally on the same row, with the title of each column also in the same row. levi | ...

htmlcssvue.jsvue-material

Utilizing Node.js to dynamically inject variables in SASS compilation

I am currently working on an application where I need to dynamically compile SASS before rendering it on the client side (a caching system is in the works, so no worries there). At the moment, my tool of choice is node-sass and so far, everything is runnin ...

cssnode.jsexpresssassnode-sass

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents

Mismatch in the Grid System of Bootstrap 4

I am attempting to create a layout similar to the one shown in this image: https://i.sstatic.net/L6L9s.png Here is the code snippet I have written: <div class="col-md-7"> <!-- Donor Name --> ...

bootstrap-4grid-layoutbootstrap-grid

Website experiencing issues with moderating Facebook comments

I recently added a Facebook comments box to my website in the footer. Although it is visible, I am unable to moderate it. Furthermore, the comments are not showing up in the comments queue panel at https://developers.facebook.com/tools/comments. I am us ...

javascripthtmlangularjsfacebookfacebook-graph-api

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

javascriptphphtmlmysqlcss

Passing a value from an HTML template to a method within an Angular 4 component

Encountering an issue with Angular 4. HTML template markup includes a button: <td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td> Data is assigned to each td from a *ngFor, like {{ da ...

htmlangulartypescript

Smooth scrolling feature malfunctioning in mobile view

While working on my website, I noticed that the smooth-scroll feature works perfectly on desktop browsers. However, on mobile devices, when I click on a link, it does not scroll to the correct position. It always ends up much lower than expected. Any idea ...

javascripthtmlcssbootstrap-4