Alignment issue with Bootstrap's vertical radio buttons

When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and not align with the rest below it. Any suggestions for a workaround or if there is something wrong with my approach?

 <style>
@media  (max-width: 768px){ 
      .radio-inline{
      display:block;
      }
}

</style>  

<div class="container-fluid">
  <div class="jumbotron">
    <div>
        <asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE 
        TEXT"/>
        <br />
        <br />
        <asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
    </div>
    <div class="row" style="padding-bottom: 30px;">
        <div class="col-lg-12">
            <label class="radio-inline">
             <input type="radio" name="A1" value="0" required> <b>0&nbsp 
               &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="1" required> <b>1&nbsp 
              &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="2" required> 
               <b>2&nbsp &nbsp</b>
            </label>
      </div>
  </div>
</div>

Answer №1

To resolve the issue, it is recommended to eliminate the spaces denoted by "&nbsp" in each input field. This adjustment should rectify the problem, as demonstrated in the provided code snippet. Remember, if you require spacing, CSS can be utilized.

Link to Example

    <label class="radio-inline">
         <input type="radio" name="A1" value="0" required> <b>0</b>
    </label>

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

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

CSS transitions following with visual/codepen

Does anyone know how to animate two images, bringing them to a central point before rotating them simultaneously? I'm struggling with transforming the svgs prior to starting the animation. Take a look at this example. My goal is to apply transform: r ...

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

What could be causing the images in my mdbootstrap carousel code to resize?

I am utilizing the carousel component provided on this webpage: . My intention is to have my images centered in their original aspect ratio, but unfortunately they are appearing stretched to fit the entire screen: https://i.sstatic.net/sRYBZ.jpg Here is t ...

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

What is the method for generating a popover in HTML when a user hovers over a button?

In this scenario, I have implemented two status buttons with different colors. The green button corresponds to "RUNNING" and the red button indicates "TERMINATED", which are fetched from JASON data. Upon hovering over the green status button, the text "RU ...

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

Tips for choosing an option from a react dropdown using Cypress

Exploring Cypress: I am currently working with the following code snippet. Although it seems to be functioning, I have a feeling that there might be a more efficient way to achieve the desired result. There are 25 similar dropdowns like this one on the pag ...

Issues with 'floating' unordered lists

.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

The specified font is not loading despite being correctly defined

I have a font stored locally in resources/fonts/ and I'm correctly linking to it, but for some reason, it's not loading. Here is the <style> section in my html: <style> @font-face{ font-family:"franklin_gothic_condensed"; ...

Sharing data with external domains and retrieving HTML output using JavaScript

When a browser sends a POST request and expects an HTML page result from JavaScript, problems arise if there is no Access-Control-Allow-Origin in the server response. Unfortunately, changing anything on the server side is not an option. If a human clicks ...

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

Rearrange div elements following an ajax request based on a data attribute and applying the .animate method

I am dealing with a collection of div elements, each assigned a unique numeric id and data-position in sequential order (1 for the first in the list, 2 for the second, and so on). Upon making an ajax call using jQuery, the response is a JSON object that r ...

I prefer to disable the toggle feature if the target remains unchanged

My goal is to create a step-by-step ordering system using the data-id="x" attribute to determine which content should be visible when selected. I want to make sure that if two elements have the same data-id, clicking on one will deselect the other. Any su ...

Move a sub-division horizontally within a parent element that has a full width of 100%

I am currently incorporating some jQuery features into my website. The concept involves expanding the parent div to 100% width for responsive design as you scroll down the page, which works perfectly. Simultaneously, I aim to translateX the child div so th ...

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line <span class="caret"></span> <ul> <li class="nav-item-1"> <a href="#">ITEM 1</a> <span class="caret"></span> ...