Ensure that in extra small screen mode, all child divs within a flex container in Bootstrap 4 are set to width

Currently, I am utilizing flex on divs that contain meta data in the header of my product page. The great thing about flex is its ability to adapt to the content rather than constrain it.

Below is my existing code...

<div class="h6 d-flex" id="product_meta">

   <div class="order-sm-0 order-1" style="background:red;">
       Some categories - tags - etc
   </div>

   <div class="ml-sm-auto text-sm-right order-sm-1 order-0 mb-sm-0 mb-1" style="background:cyan;">
       SKU #000000 - From £2.55
   </div>       

</div>

To view a full demo, click here: https://www.codeply.com/go/PKYh4oHvTC

In my screenshot below under "Small Screen" and up mode, I use ml-sm-auto to push the right meta away from the left meta, allowing content to fluidly adjust based on capacity.

If you encounter any issues or have suggestions, please let me know! Your feedback is highly appreciated.

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

The issue I was facing was resolved by implementing the code below, which utilizes .flex-column for mobile devices and .flex-sm-grow for small screens and above.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<main class="container">
  <div id="product_header">

    <h1 class="h2">This is my product title heading</h1>
    <hr/>
    <div class="h6 d-flex flex-column flex-sm-row" id="product_meta">
      <div class="order-sm-0 order-1" style="background:red;">
        Some categorys - tags - etc
      </div>
      <div class="text-sm-right order-sm-1 order-0 flex-grow-1 mb-sm-0 mb-1" style="background:cyan;">
        SKU #000000 - From £2.55
      </div>
    </div>
  </div>
</main>

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

Issues with CSS animations and transformations on SVG files are not being resolved

I've been attempting to create a transform animation using an SVG file, but unfortunately, the animation or transform isn't functioning at all. I've taken the time to research this issue, however, I haven't found a solution yet. Can any ...

htmlcssanimationtransform

The margin property is set to zero but the div element still maintains some spacing

How can I create a div with no margin for a header that spans across the page? Here is what I have tried: <!DOCTYPE html> <html> <head> <title></title> <style> .test { height: 100 ...

htmlcsslayoutmargin

Include a search button within the search box of the Custom Search Engine

Can anyone help me with adding a search button to my HTML code? I've tried implementing it, but when I try to search something on a website like YouTube, the results show up without displaying my search query. How can I fix this issue and what changes ...

javascriptjqueryhtmlsearchgoogle-search-api

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

cssreactjsmaterial-uijss

Locating Elements with Python 3 and Selenium: Unraveling the xpath Mystery

https://www.facebook.com/friends/requests/?fcref=jwl&outgoing=1 I am looking to click on the "See more request" option within the "friend request sent" section. <div id="outgoing_reqs_pager_57b87e5793eb04682598549" class="clearfix mtm uiMorePager ...

pythonhtmlseleniumxpath

Encountering a problem with AJAX 'post' method while trying to post HTML elements

Incorporating AJAX to transmit the content of a div to my C# MVC controller. The structure of the AJAX post is as follows: $.ajax({ url: '/Home/SaveContent', type: 'POST', data: { model: modelDataJson, activ ...

c#htmlajax

What is the best way to prevent text wrapping once the viewport border is reached?

Consider the following code snippet (feel free to click and drag outside the text area) - the text wraps when it reaches the viewport border. let isCaptureActive = false; let offset = { x: 0, y: 0 } const fooDOM = document.querySelector('#f ...

htmlcss

The presence of absolute positioned elements is causing the appearance of a horizontal scrollbar

On my webshop's categoria page, I have implemented sliders to filter products based on price ranges. The issue arises when viewing the site on mobile devices, as a horizontal scrollbar appears due to the absolute positioning of these sliders and thei ...

javascripthtmlcssbootstrap-4ion-range-slider

Is there a way to customize the default padding applied to Material-UI components across the board?

I've been struggling with getting the AppBar component to cover the entire area by default. I've searched through the documentation and scoured Google for a solution, but so far I haven't found one that works. I also attempted to adjust th ...

cssreactjsmaterial-uifrontend

Mobile view logo alignment issue

Apologies for the beginner question. I purchased a template to work on my skills, but I'm facing an issue with centering the logo on mobile devices that I can't seem to solve. To make it easier to understand, I've uploaded the code to a dom ...

javascripthtmlcss

Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...

htmlcssbootstrap-4frontendbootstrap-5

PHP Error: Sound Reflection

My HTML code is quite lengthy and I am using the echo function to display it. However, I am encountering an error. Interestingly, when I remove the problematic code snippets highlighted by the error messages, a new error appears in the body section of the ...

phphtmlcompiler-errorsecho

Tips for zooming out a Bootstrap 4 table

I am working with a bootstrap table that looks like this: <div class="table-responsive"> <table> .... </table> </div> Current display on mobile: https://i.sstatic.net/6b6qa.png desired display on mobile: https:// ...

cssbootstrap-4

Customize stepper background color in Angular Material based on specific conditions

I am working on a project using Angular Material and I want to dynamically change the color of the stepper based on different states. For example: state: OK (should be green) state: REFUSED (should be red) Here is what I have done so far: <mat-horizo ...

cssangulartypescriptangular-materialangular-material-stepper

What is the best way to generate an HTML snapshot using C#?

I'm currently working on a page with Ajax functionality and I'm interested in making it SEO crawlable. After reviewing Google's guidelines at https://developers.google.com/webmasters/ajax-crawling, I learned that I need to use "#!" to create ...

htmlseo

React Navbar toggle button malfunctioning with Bootstrap 4.5.3 - troubleshooting needed

My toggle button is not working in my React app. Can someone please help me troubleshoot this issue? Should I use ul li tags or is there a library that can create a responsive navbar for React? import React from "react"; import { Link, NavLink } ...

javascriptreactjswebbootstrap-4frontend

Chrome displays a 1px space when using the Bootstrap sticky navbar

Just putting the final touches on my latest project at . I applied the bootstrap .sticky-top class to the navbar, but in Chrome, there seems to be a small 1px gap above the navbar where you can see the content behind it. This issue doesn't occur in Sa ...

csstwitter-bootstrapbootstrap-4

Activate Bootstrap tooltip manually for checkboxes

Creating a customized validation module for my web application has been an interesting challenge. I have successfully implemented a change listener on all checkbox elements to validate whether they are required or not. If an element is unchecked, it fails ...

jquerytwitter-bootstraptwitter-bootstrap-tooltip

"Applying CSS styles to highlighted text using jQuery - how can I do it

Struggling to style selected text with CSS? Here's what I've tried so far without success in Firefox. $(document).keyup(function(){ savedRange = selection.getRangeAt(0); $(savedRange).wrap('<span style="color:red"></span>' ...

javascriptjquerycss