When the browser width decreases, the layout's rows become wider

Here is the code snippet I'm using:

                <style>
                    a.item
                    {
                        border:1px solid #aaa;
                        background:#ddd;
                        padding:10px;
                        display:block;
                    }
                    span.price
                    {
                        display:block;
                        text-align:center;
                        background:#555;
                        color:white;
                    }
                </style>
                <div class="main">
                    <div class="row">
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

This markup looks good initially, as shown here: https://i.sstatic.net/lKotY.jpg

However, when I resize the browser window, the layout breaks and appears like this:

https://i.sstatic.net/QkH16.jpg

The "image" and price elements are no longer aligned next to each other. Any suggestions on what might be causing this issue in my code?

Thank you!

Answer №2

To fix the issue, try changing .col-md-6 to col-xs-6. The class col-md-6 is only effective for medium-sized screens and larger, while col-xs-* applies to extra-small screens and up. For more information, you can visit: http://getbootstrap.com/css/#grid-options

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

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

Unable to select the element transitioning from [display:none] to [display:block] in the bootstrap datetimepicker

I'm facing an issue with a bootstrap DateTime picker on my page. The calendar icon allows me to show the popup, which changes from display: none; to display: block; However, when I click the button labeled 今日, I encounter an error: selenium.comm ...

The class within the div element will fail to pick up the specified CSS styles

I've been troubleshooting an issue with a newly created div that's not picking up its corresponding styles from the stylesheet. It's frustrating and I could really use some help. Here is the HTML: <div class="2columnlayout"> < ...

What are the ways to personalize the material UI select component?

I am looking to customize a MUI select component that I have rendered on a dark background. My goal is to make the outline and all its contents light colors, specifically grey and white. https://i.sstatic.net/HFUBj.png So far, I have successfully changed ...

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

What is the best way to evenly space 3 divisions in a row so that the last element is centered on the page?

Is there a way to align three divs horizontally, evenly spaced, in a manner that positions the rightmost element at the center of the page? ...

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...

Tips for highlighting the final word in the headline using an underline

I'm attempting to create a title style similar to what is shown below The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking for. Here's my code: <h ...

The transparent background causes the vertical menu to malfunction on IE8

This is the first website I am working on: www.olgoya.com The issue I am facing is that all major browsers, except IE8, display the submenu even when the mouse hovers over the 'portfolio' item. Upon investigation, I found that the problem lies w ...

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

Creating customized placeholders using CSS padding in HTML5

I came across this helpful post and attempted various methods to adjust the padding for my placeholder text, but unfortunately, it seems unwilling to cooperate. Below is the CSS code. (EDIT: This CSS was generated from SASS) #search { margin-top: 1px; ...

Is it acceptable to conceal items by utilizing display:none?

When dealing with a dynamic website that includes components from various plugins, is it acceptable to hide elements temporarily or permanently using display:none? Sometimes clients may request certain items to be hidden from the page, so instead of removi ...

I'm having trouble anchoring my images to a specific spot on the webpage in HTML

After creating my divs in css and linking them to my index file, I encountered an issue when zooming out of the page. The images would shift to the left while the background remained centered. I needed help figuring out how to keep an image fixed on the pa ...

How can we improve our vertical division method?

Looking for a more efficient way to create a vertical divider between two divs. I want the divider to be centered between the "why choose" and "gallery" sections. Here is an example of what I'm trying to achieve. I've attempted the following co ...

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

The JQuery command to set the display property to "block" is not functioning as expected

When trying to toggle the visibility of my TextBox based on a selected value in a RadiobuttonList, I initially wrote the following code: $("#<%= rbtnIsPFEnabled.ClientID %>").click(function () { pfno = $("#<%= txtPFNo.ClientID %&g ...

Adjusting variables in Bootstrap using the app.scss file is a helpful customization technique for

As I work on a template that will be utilized by various individuals across different projects, ensuring it functions seamlessly without the need for project-specific modifications is paramount. In this particular case, my goal is to modify the $spacer va ...

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...