Tips for creating a button that maintains consistency across different screen sizes

One of the images linked below shows a button displayed on two different sized screens, one 24 inches and the other 13 inches. The button on the 24-inch display appears normal, while the "Add to Cart" button on the 13-inch display is broken. Check out the images here: 13-inch display button and 24-inch display button

    <div class="row my-5" id="3">
            <span id="lblArtworkId" style="display: none;">3</span>
            <div class="col-2">
                <div class="d-flex justify-content-center">
                    <a href="./">
                        <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                    </a>
                </div>
            </div>
            <div class="col-6">
                <div class="h-100 d-flex flex-column justify-content-between">
                    <span>
                        <a href="./" class="text-decoration-none text-muted fs-4">
                            Construction in Red, Blue & Yellow Drawing
                        </a>
                    </span>
                    <hr>
                    <p class="m-0">Artist: Karin White</p>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-center">
                    <span class="fw-bold">$ 1120.00</span>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-between">
                    <button id="btnRemove" class="btn btn-outline-danger">Remove</button>
                    <button id="btnCart" class="btn btn-primary">Add to Cart</button>
                </div>
            </div>
        </div>
csslaraveltwitter-bootstrapbootstrap-5

Answer №1

To adjust the layout, you can utilize columns with a breakpoint prefix like col-xxl-2 col-3. Visit Bootstrap Breakpoints and Grid options for more detailed information. Keep in mind that Bootstrap is more responsive to pixels than inches.

For instance:

<div class="container">

    <div class="row my-5" id="3">
        <span id="lblArtworkId" style="display: none;">3</span>
        <div class="col-xxl-2 col-3">
            <div class="d-flex justify-content-center">
                <a href="./">
                    <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                </a>
            </div>
        </div>
        <div class="col-xxl-6 col-9">
            <div class="h-100 d-flex flex-column justify-content-between">
                <span>
                    <a href="./" class="text-decoration-none text-muted fs-4">
                        Construction in Red, Blue & Yellow Drawing
                    </a>
                </span>
                <hr>
                <p class="m-0">Artist: Karin White</p>
            </div>
        </div>
        <div class="col-xxl-2 col-4">
            <div class="h-100 d-flex align-items-center justify-content-center">
                <span class="fw-bold">$ 1120.00</span>
            </div>
        </div>
        <div class="col-xxl-2 col-8">
            <div class="h-100 d-flex align-items-center justify-content-between">
                <button id="btnRemove" class="btn btn-outline-danger w-50 mx-1">Remove</button>
                <button id="btnCart" class="btn btn-primary w-50 mx-1">Add to Cart</button>
            </div>
        </div>
    </div>

</div>

Don't overlook adding the required meta tags:

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

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

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

javascriptcsshtmlcanvas

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Is there a way to convert this hover menu into an onclick menu? <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'><span>Users</span></a> <ul> ...

phpcss

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

The foundation grid system is experiencing difficulties when implemented on an Angular form

After successfully installing Foundation 6 on my Angular project, I am facing an issue with the grid system not working properly. Despite numerous attempts to troubleshoot and debug, I have not been able to resolve this issue. If anyone has any insights or ...

cssangularzurb-foundationzurb-foundation-6

Stunning CSS Image Showcase

When hovering over my image gallery, it works fine. However, I would like the first image in the gallery to automatically appear in the enlarged section instead of displaying as a blank box until hovered over. <!DOCTYPE html> <html lang="en"> ...

htmlcss

Four boxes sharing identical code, yet yielding distinct outcomes

Can someone help me understand the concept of positioning in CSS? I created a simple code with 4 boxes that have identical width and height settings. When I position them as fixed or absolute, they look fine and identical. However, when I position them wit ...

cssposition

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

jquerycss

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...

htmlcssreactjsmaterial-ui

Is it possible to create a horizontal navigation bar with buttons that scrolls when media queries are activated? I am looking for a solution using HTML,CSS, JavaScript, and Bootstrap

Struggling to create a horizontally scrollable navigation with buttons for media queries in Bootstrap 5.2, using SCSS for styling. This project is starting to feel overwhelming as we try to replicate the EA site. We're aiming to mimic the behavior of ...

javascripthtmlsassscrollbootstrap-5

The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...

htmlcssbootstrap-4

An HTML table featuring rows and columns that can be adjusted in size separately from the content within each cell

Looking to create an HTML table where the columns and rows can be sized independently of the cell content? If a row or column isn't large enough to display all the content, it should simply overflow behind the cell. A solution was found that worked in ...

htmlcssfirefox

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

What could be causing the menu to not align in the center?

Take a look at the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...

htmlcssbootstrap-5

Toggling jQuery to show or hide content depending on the selector

I am looking to implement a jQuery-based animation and here is the code I have so far: >items=document.querySelectorAll("#customers td span"); [<span alt=​" 02,Counter,11,2013-04-06 14:​59:​16">​ 02​</span>​, <span>​11 ...

javascriptjquerycsscss-selectors

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

javascriptcsseventsvue.js

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

Using Blade to pass an array of arrays

I am facing an issue with passing an array of arrays from the controller to the view in Laravel. Despite conducting some research, I have not found any relevant topics to assist me with my problem. The tables involved are Shops, Items, and Items Price. Sho ...

phparrayslaravel

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss

Ways to reach the standard look

Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...

jquerycsshtmljquery-animate