Issue with Bootstrap 2-column layout not functioning properly on mobile devices

I have been working on Bootstrap and I am facing an issue with the positioning of two badges. Currently, one badge appears on the right side and the other on the left side.

Although I tried adjusting the left property, it causes overlapping when the size of the first badge increases, especially in mobile view.

If anyone can provide guidance on what I might be doing wrong, I would greatly appreciate it.

Below is the CSS code for the badges:

        .available_badge {
        left: 0% !important;
    }
    .badge-multilet {
        left: 0px !important;
    }
    @media screen and (min-device-width:320px) and (-webkit-min-device-pixel-ratio:2) {

        .badge-multilet {
            right: 0% !important;
            left: inherit !important;
        }
        .available_badge {
            left: 0% !important;
        }
    }

https://i.sstatic.net/CwcIE.png

Answer №1

When the screen width is between 320px and 480px, the following media query is applied.

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

What causes the container's height to remain unchanged despite changes in the height of its image content?

When I set the height of an image to 50%, its container's height remains the same instead of automatically adjusting. HTML: <section class="img-show"> <div class="img-container"> <ul> <li cla ...

Incorporating a variety of background images and colors into a navigation bar

Hey there, I could really use some assistance with a design challenge I'm facing. My goal is to have a navigation bar with two different background colors - most of the list items should have a red background, while one specific item needs to have a b ...

Unable to get compatibility mode IE to work as intended

I am facing an issue where I need to showcase a webpage in compatibility mode. Despite using the code below: <meta http-equiv="X-UA-Compatible" content="IE=11"> It seems like this code only functions if compatibility mode is already enabled. In tha ...

What is the secret to adding rounded corners to a Google map interface?

Similar Question: Transparent rounded corners on Google Map Despite trying various style sheet properties tailored for different browsers, I'm still unable to achieve the desired effect. Is there a special technique or hack to make this work? I r ...

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

"Revolutionizing the way we navigate: Angular's innovative

Presently, my focus is on incorporating route transitions into my project. I've employed a component that appears on click and triggers the corresponding service function: routeTransition(destination) { if (this.router.url !== destination) { t ...

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

A guide on utilizing bootstrap tooltip feature to display information when hovering over an image

I have a jQuery function that dynamically creates an image and li element on the page. My goal is to implement a bootstrap tooltip so that when the mouse hovers over the image, additional details about it will be displayed in a separate tooltip similar t ...

Sleek design featuring a header, footer, Left Menu, Content, and RightMenu implemented on Bootstrap 4-5

Can you help me create a minimal layout using Bootstrap 4-5 with a header, footer, LeftMenu, Content, and RightMenu? The combined width of LeftMenu, Content, and RightMenu should be similar to the main block on the current site (htmlforum.io). This means ...

Show both text and image inputs side by side within a table

Hey there, I'm trying to create a table with both text and image inputs inside. Here's the code I've attempted: <tbody> <tr> <td class="inputs"> <input type=" ...

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

When an image is opened in a modal, it causes the original image on

I recently created a website using HTML/CSS and JavaScript, and I incorporated a modal using Bootstrap 5. To add a unique touch, I used JavaScript to replace the standard "Save changes" button of Bootstrap with a random image inside the modal. However, I n ...

Display an image with only a portion visible, no canvas, no frame, and no need

My dilemma involves an img with a surrounding box div. http://jsfiddle.net/6d4yC/7/ 1) I am seeking to display only a portion of the image (250x150) without generating a white overlay when it is in its large size. Placing a #box1 div around the image has ...

Utilize CSS :hover for revealing and concealing HTML elements

Why does the (.nav-element>a:hover) in the given code work properly, but the (.nav-element>a:hover .nav-dropdown1) does not seem to respond? I have attempted various methods to activate it, but is there an issue with the syntax in the rule that is ca ...

"Struggling with a Bootstrap problem in my Accordion Table

I'm working with a Bootstrap table that includes an accordion feature. My goal is to have the second row hidden by default. However, when I click to reveal it, the table shifts. How can I smoothly animate the opening without causing any shifting? ...

Defining colors in TinyCSS and GTK themes using the `@define-color

I've been working on a project that involves parsing GTK+3 themes using the TinyCSS library. However, it seems that TinyCSS is not recognizing lines such as @define-color base_color #FAFAFA; These definitions are stored in parser.styleSheets[0].er ...

Hide the div only if a specific element is found on the page

I am currently exploring different methods to show or hide a left-hand navigation menu on my Volusion store. Is it possible to use JavaScript or jQuery to alter the CSS display property of a div based on the presence of another element on the page? The i ...

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

The jquery UI button is displaying too wide even though the padding is set to zero

My goal is to decrease the width of certain jQuery buttons. Though I have attempted to eliminate padding using the code below, there remains a minimum of 5 pixels on either side of the text within my button. .button().css({ 'padding-left':' ...