Organizing content on a webpage with specific pixel measurements

I have a div and am utilizing Bootstrap 5. I'd like to have the Description and Length elements on separate lines when the page width is <=1024px.

        <div class="col-3 col-md-4 col-lg-3">
            <div class="card d-flex align-items-center dynamic-card mb-3">
                <div class="card-body">
                    <div class="card-title">@Tester.ProjectName</div>
                    <div class="row">
                        <div class="col">
                            <label>Description</label><br>
                            <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="597d190d3c2a2d3c2b771834362c37">[email protected]</a>
                        </div>
                        <div class="col">
                            <label>Length</label><br>
                            @Tester.SquareFeet
                        </div>
                        <div class="col d-flex align-items-center justify-content-end">
                            <div class="icon next-button"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm trying to figure out where and how to implement this change. Would a media query be needed? What would it look like?

cssbootstrap-5

Answer №1

If you're looking for a solution, consider using the code snippet below:

.row {
  display: flex;
  gap: 0.5rem;
}

@media screen and (max-width: 1024px){
  .row {
    flex-direction: column;
  }
}
<div class="row">
    <div class="col">
        <label>Description</label><br>
        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2400647041575041560a65494b514a50">[email protected]</a>
    </div>
    <div class="col">
        <label>Length</label><br>
        @Tester.SquareFeet
    </div>
    <div class="col d-flex align-items-center justify-content-end">
        <div class="icon next-button"></div>
    </div>
</div>

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

The execution of a link in Firefox is blocked only when an active div is shown

The code includes an <a href> element that wraps around two div elements. One of the divs is only displayed when the link is clicked, and it appears above the other div. This setup serves as a visual feedback mechanism for user interaction. To see a ...

htmlcssgoogle-chromefirefox

Creating a layout with three rectangular shapes using HTML and CSS

What is the most effective method to achieve the following layout using HTML/CSS: +---------+---------------------------------------------------+ | my | Home About Categories Donate | | best +---------------------------------- ...

htmlcsspositioning

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

javascriptjqueryhtmlcss

Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery. Here is my fiddle: http://jsfiddle.net/t5Nf8/195/ html: <div class="arrow-down"></div> <div class="arrow-up"> ...

javascriptcss

`Incorporating width and vertical alignment in an image`

I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation. Check out my Example Site Unfortunately, I can't seem to ...

htmlcsszurb-foundation

The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

I'm currently working on a website using Bootstrap 5 as my framework. The issue I'm facing is that when scrolling down the page and keeping the table header stuck to the top, the disabled button ends up showing over the header. I attempted to us ...

htmlcssbootstrap-5

Employ a CSS3 media query within a Sass @for loop

Is it really achievable? For instance: @for $i from 1 through 12 { @media screen and (min-width: #{$i * 240}) { width: {$i * 240 + (20*($i-1)) } ; } } However, the issue I'm facing is Invalid CSS after "...nd (min-width: ": expected expre ...

cssmedia-queriessass

Is there a way to customize the hover effect on this navigation link in Bootstrap that includes a span and an icon from Bootstrap?

<li class="nav-item mt-3"> <a href="#" class="nav-link px-2 d-flex justify-content-start align-items-center"> <i class="nav-icon bi bi-calculator-fill fs-4"></i> ...

htmlcssbootstrap-5

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

jqueryhtmlcssmobile

Why is it proving difficult to eliminate margin and padding from the top of the page?

Struggling to remove padding or margin from the top, I attempted to adjust the main container settings: margin-top:0px !important; padding-top:0px !important; Unfortunately, this did not have the desired effect. The code is too lengthy to include in thi ...

htmlcss

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

javascripthtmlcssfont-size

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

javascripthtmlcss

I need assistance getting a <div> perfectly centered on the page while managing the bottom and right margins

I created a design resembling the French flag and I want to maintain the same margin from the edge of the browser window. However, the ratio of the container may change. The image below illustrates what I have implemented. https://i.sstatic.net/mInBn.png ...

htmlcss

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

cssreactjsnext.jstailwind-css

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

The animation feature in Angular JS seems to be malfunctioning

Currently in the process of creating a slideshow using AngularJS, similar to the one found at this link, which includes navigation arrows (next and prev). Here is the HTML code snippet: <div class="carousel"> <div class="left"><input ty ...

cssanimationangularjs

Ion-content - Consisting of three elements with varying vertical positioning

I've been facing a challenge trying to include 3 different components (such as buttons, images, etc.) with distinct vertical alignment within the same ion-view. One should be aligned at the top, one in the middle, and one at the bottom. Take a look a ...

cssionic-frameworkvertical-alignment

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...

htmlcss

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

htmlcss

Customizing Material UI Themes

Is there a way to customize the MuiTheme overrides for a specific named element like this? .MuiStepLabel-label.MuiStepLabel-active { color: rgba(0, 0, 0, 0.87); font-weight: 500; I've attempted modifying various classes such as MuiStepLabelLa ...

javascriptcssreactjsmaterial-ui