Why does col-sm-12 not fill the entire width on smartphones? Am I missing something?

SASS Breakpoints Definition:

/* For the grid */
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1660px
);

Structure of My Columns:

<div id="footer_lower_menus" class="row">
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
</div>

Expected Behavior: Columns should take up one third of the space on lg screens and wider, one half on md screens, and full width on sm screens or smaller (like xs).

Current Issue: The columns are resizing correctly for larger screens, but for sizes smaller than sm (specifically xs, which is set to zero), the columns are reverting back to one half or one third (not applying the specified breakpoints).

Note: The content within the columns contains text and is constrained by a "max-width" of 100%.

What am I missing or doing wrong in this setup? How can I make the columns adjust for "sm or smaller" instead of "sm only"?

Answer №1

To achieve full-width content, simply remove the col class from your code and observe the changes. This will allow your content to span the entire width of the row.

The col class is designed to evenly divide the row into specified parts. For example, using

<div class="col">text</div>
multiple times in a row will divide the row space equally, with each col taking up 20% of the width.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="container-fluid">
    <div id="footer_lower_menus" class="row">
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 1
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 2
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 3
      </div>
    </div>
  </div>
</body>
</html>

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

BlendModeGlobal operations

Experimenting with the globalCompositeOperation property in a loop by passing different strings (source-atop, source-over, etc.) to the same 2D context, I observed that Firefox only allowed me to draw a few shapes while Opera only displayed the last one. ...

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

Using HTML5 input type number along with a regular expression pattern

In order to display only numbers and forward slashes in the input field with regex pattern, I attempted the following code: <input type="number" pattern="[0-9\/]*"> However, this code only shows the number pad from 0 to 9. How can I modify the ...

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

What makes text-decoration a crucial element of the foreground design?

<span>Educating children on unlocking their creative and intellectual potential through the world of Computer Science.</span> Here is the HTML code provided above along with the corresponding CSS: span { text-decoration: underline; color: red ...

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...

Utilize ASP to gather information from bulletin board systems

Hey there! I am a beginner in ASP programming and I am looking to extract data from a specific bbs link: http://sports.williamhill.com/bet/en-gb/betting/y/5/tm/Football.html. My plan is to click a button that will take me to the page above and extract th ...

Ways to retrieve the HTML radio button's value

Within my HTML document, the following code snippet is present: ... <div class="tab-pane fade" id="account-notifications"> <div class="card-body pb-2"> <h6 class="mb-4">Activ ...

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

Problem with the spacing in the Bootstrap website after the breadcrumbs due to flexbox issues

I'm facing a challenge with one of my Bootstrap-based pages that I can't quite figure out. We recently implemented breadcrumbs for navigation, which is also built with Bootstrap. However, some pages are displaying a significant gap between the br ...

Are CSS generated elements limited to text content only?

Can CSS generated content be used for more than just text? Take for example the code snippet below, where the span is displayed as text rather than creating a new span element. .addbefore:before { content: "<span>dfsd</span>"; } ...

HTML tags are permitted in the contact form 7 area

Is there a way to include a contact form 7 shortcode in an HTML area that only allows HTML tags? [contact-form-7 id="2358" title="Contact Form 1"] I am trying to incorporate the 3rd slide on my website from this URL: ...

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

What is the best method for incorporating success icons into my website with vue.js?

Hey everyone, please excuse my lack of expertise as I am a beginner in this field. I'm trying to incorporate success icons into my website using bootstrap or similar tools, but I'm unsure of how to implement the if statement below. If anyone co ...

Invisibility Problem

As a newcomer to web design, this is only the second website I have ever created. However, I am facing an issue with my Nav bar that I cannot seem to resolve. I want my "Other Pages" section to be visible when the screen size is below 600px and hidden when ...

Tips on changing the text alignment in ant design's Select with search field component within a Form item to support various languages

Is there a way to dynamically change the text direction in a search field based on the language being typed by the user? For example, switch the direction to rtl when typing in Arabic and to ltr while typing in English. I need to achieve this functionalit ...

The focus on the input text in AngularJS functions properly on desktop devices but not on iPads

I am facing an issue with the search input box in my application. Even though the search input opens when I click a button, it is not autofocusing. Here is the snippet of my code: $scope.goSearch = function () { $scope.$broadcast("focusTextInput"); } ...

Eliminate border around image link

I can't figure out what I'm doing incorrectly... I included some CSS code a:active {text-decoration: none; border: 0px solid black} a:link {text-decoration: none; border: 0px solid black} a:visited {text-decoration: none; border: 0px solid black ...

What types of devices are compatible with the different versions of the Android operating system?

I am currently working on a jquerymobile application for Android versions 2, 3, and 4, as well as iPhone, iPad, and iPod touch. I am analyzing user-agent strings using jQuery and jquerymobile. After testing with an emulator, I have noticed that all device ...

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body. $(".mydiv").on("click", function() { $("html, body").css("overflow", "hidden"); }); However, this action causes the window to scroll to the to ...