Mobile responsiveness issues with Bootstrap 4 row

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello, world!</h1>

    <div class="row table-row">
      <div class="col-md-1 col-xs-1">
        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35" />
      </div>

      <div class="col-md-3 col-xs-5">Felecia Burke</div>
      <div class="col-md-2 d-none d-sm-block">Staff</div>
      <div class="col-md-3 d-none d-sm-block">+1 (070) 123-4567</div>
      <div class="col-md-2 col-xs-4"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66031e070b160a03260b070f0a4805090b">[email protected]</a></div>
      <div class="col-md-1 col-xs-1">
        <i class="fas fa-ellipsis-h table-row-menu"></i>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43332c333326316d293003726d72756d73">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>

</html>

Having an issue where the grid works on all other devices except for mobile, where the media queries are not showing up correctly. Would appreciate some help in debugging this.

The goal is to have all divs visible on tablet, laptop, or larger devices, but on mobile devices I want to hide the "Staff" and phone number information.

For some reason, everything appears in block style when viewed on a mobile device, which is unexpected.

The template used was copied from Bootstrap's official website.

cssbootstrap-4media-queries

Answer №1

Could it be that the issue lies with the xs screen size not being recognized? Is there a minimum width set on any element? You could experiment with using .d-sm-none .d-md-block to see if that resolves the problem for the specific screen size you are troubleshooting.

Answer №2

Just a quick update to show you what I'm working on. Need to tweak a few things, as the Mobile View staff and phone number seem to be missing. What could be causing this issue?

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Hello, world!</h1>

  <div class="row table-row">
    <div class="col-md-1 col-xs-1">
      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35" />
    </div>

    <div class="col-md-3 col-xs-5">Felecia Burke</div>
    <div class="col-md-2 d-none d-sm-block">Staff</div>
    <div class="col-md-3 d-none d-sm-block">+1 (070) 123-4567</div>
    <div class="col-md-2 col-xs-4"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7eaf3ffe2fef7d2fff3fbfebcf1fdff">[email protected]</a></div>
    <div class="col-md-1 col-xs-1">
      <i class="fas fa-ellipsis-h table-row-menu"></i>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41312e313124336f2b3201706f70776f71">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</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

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Is it possible to use Bootstrap to display grid columns or rows within a Carousel instead of carousel-items? The concept involves having intricate grid column structures that rotate like carousel-items. For instance, if we have the following grid: <div ...

csstwitter-bootstrapbootstrap-4

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Transforming the style of a particular element within React using Array().fill().map's method

Looking for a way to dynamically change the color of an array in React + styled jsx? Let's say you want to change the color when the number of elements in the array is a multiple of 4 (e.g. the index is 4, 8, etc.) Is there a clever solution to achi ...

cssreactjs

CSS page header not appearing on all pages when printing from TryitEditor in Safari on iOS

Experimenting in W3's TryitEditor, I am currently using the following CSS: p.hr { position: running(header) } @media print { .pagebreak { page-break-before: always; } @page { @top-center { content: element(header); } } } Ther ...

htmlcssiossafari

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

I am trying to create a responsive design where an image will fit the screen without being cropped in both portrait and landscape mode. I have attempted the following code: <!doctype html> <html> <head> <style> img { max-height ...

htmlioscssiphone

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

Effortless Page Navigation - Initial click may lead to incorrect scrolling position, but the subsequent link functions perfectly

While implementing the Smooth Page Scroll code from CSS Tricks, we encountered an issue where clicking on a navigation link for the first time only scrolls down to a point that is approximately 700px above the intended section. Subsequent clicks work perfe ...

javascriptjquerycssscrollsmooth-scrolling

What is the best way to conceal the outline in a popup window?

I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...

javascriptjquerycssknockout.js

Displaying Unicode CSS Font Awesome Icons as Boxes in a React Project

I have incorporated the jPlayer example into a create-react-app. Encountering an issue where font-awesome icons are displaying as boxes in this CodeSandbox illustration. https://codesandbox.io/s/peaceful-heisenberg-d59nz?fontsize=14&hidenavigation=1&a ...

cssreactjsunicodefont-awesome

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

javascripthtmlcssbootstrap-4

Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text. Here is how it appears on desktop: [![enter image description here][1]][1] This is the current mobile view (the image is ov ...

htmlcss

Can someone tell me where I can locate the CSS file once I've finished using Scene Builder?

Currently, I am working on my database project using Scene Builder. I have applied some CSS styling and would like to locate the CSS file in order to attach it to my IntelliJ project for further code editing. Can anyone guide me on where to find the CSS ...

cssjavafxscenebuilder

How to center an image vertically inside a link using CSS

My goal is to vertically align an image inside an anchor element using the following code: <ul class="thumbnails"> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://www.forodefotos.com/attachme ...

htmlcsstwitter-bootstrap

Surprising spacing found between CSS header elements

As I am in the process of redesigning a website, I have encountered an issue with certain elements in the header section. Specifically, the header consists of a logo, some text, and a navigation bar. There seems to be a thick gap between the bottom of the ...

htmlcss

How can you update an image's source when hovering over it?

My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...

c#javascriptjqueryasp.netcss

Addressing Layout Problems When I Enlarge the Browser Width

My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...

phphtmlcsswordpress

Changing the color of placeholder text with CSS on Squarespace

I'm having a tough time figuring out how to adjust the color of the placeholder text in my form fields. Despite being able to change the background color of the form fields, I can't seem to alter the text color. The placeholder text doesn' ...

cssformssquarespace

Problem aligning ul within div element

I'm having trouble aligning my ul element in the center of a div. I tried using the margin: 0 auto method, but it's not working as expected. I've always wondered if setting the width of the ul within a div is necessary for using margin: 0 au ...

htmlcsshtml-lists

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

htmlcss