Mobile View Not Displaying Bootstrap Column

I'm currently working on creating a two-column layout, one for text and the other for an image. Everything appears correctly on desktop view, but on mobile devices, the image column is not showing up. How can I adjust it so that on mobile devices, the image column appears first in full width after the navbar, before the text column?

<div class="container-fluid">
        <div class="row">
            <!--Text Column-->
            <div class="col-sm-6 sec-1">
                <h1>Frank Kreutzer</h1>
                <h2>Frontend Web Developer</h2>
                <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
            </div>
            <!--Image Column-->
            <div class="col-sm-6 sec-2"></div>
        </div>
    </div>

For reference, here's a codepen link to the page: https://codepen.io/Frankk97/pen/QBBNym/

htmlcssmobilebootstrap-4

Answer №1

To ensure a column layout displays correctly across all devices, it is recommended to use the class col-6 instead of col-sm-6.

According to the bootstrap grid documentation, the selector .col- is for screensizes less than 576px, while .col-sm is for screensizes greater than or equal to 576px.

You can view the updated code in this CodePen.

Update:

The CodePen has been updated to display an image covering the full width as the first section on mobile by modifying the parent div to use bootstrap flex - 

<div class="row d-flex flex-column-reverse flex-sm-row">

The child divs have also been updated to cover the full screen on mobile.

<div class="col-12 col-sm-6 sec-1">

A new class and media query CSS have been added for the image div.

<div class="col-12 col-sm-6 sec-2 image-section"></div>

@media screen and (max-width: 575px) {
    .image-section {
        height: 200px;
    }
}

Answer №2

If you want the image to display correctly, make sure to define a specific height for the corresponding div. To achieve the opposite layout, use a media query with a flex-direction of column-reverse.

Answer №3

Here is the suggested style for your code:

@media (max-width: 576px) {
  .sec-2 {
    height: 300px;
  }
}

The specified style is necessary because an image has been added as the background-image in a div with no content. In resolutions below 576px, the div does not have any intrinsic height, so adding a specific height to that element on small screens is essential.

In addition, order classes have been utilized to change the order on different devices. Please see the example below.

The sec1 class has been removed as it was deemed unnecessary.

.navbar {
  /*background: #031426;*/
}

.navbar li a {
  color: #000;
  transition: all 0.3s ease-in 0s, all 0.5s ease 0s;
}

.navbar li a:hover {
  color: #E64BA7;
}

<!-- Additional CSS and HTML code provided here -->

Answer №4

When viewing on mobile: Three equally sized columns: The layout consists of three columns that are the same width on desktop and larger screens, but on tablets and mobile devices, they will stack on top of each other automatically.

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
      margin-right: -15px;
    margin-left: -15px;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</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

I.E Compatibility Problem with Button CSS Styling

I've created a button with some styling that looks great on Firefox and Chrome, but unfortunately doesn't work quite right on Internet Explorer (all versions). Check out the JsFiddle DEMO : http://jsfiddle.net/Mhded/1/ Below is the code I' ...

htmlcssinternet-explorer

Divs do not stack as expected, but rather overlap each other

I am encountering an issue where the right-column1 does not move under the left-column1 when the screen size is limited for both to display side by side. I have tried various overflow options and media queries, setting them to 100% when the browser or devi ...

htmlcssresponsive-designoverlap

The Dropdownlist menu from Metro UI CSS does not function properly when placed in an ASP page within a subfolder

I'm currently facing an issue with my asp.net application in C# that utilizes Metro UI CSS for the Dropdownlist menu. The problem arises when the Dropdownlist menu works properly on pages within the same folder as the master page, but fails to functio ...

jqueryhtmlcssasp.net

Removing items from a list in a Vue.js application

I've encountered an issue with my code. I'm attempting to remove a "joke" from a list, but it consistently removes the joke that was inputted before the one I'm actually trying to delete. I'm struggling to identify what mistake I might ...

htmljsonvue.js

Looking to implement a scroll bar in your PhoneGap mobile app for Android?

Encountering an issue with my Android PhoneGap mobile website application. I have implemented a scroll bar in the application which works perfectly on PC. However, when testing on an Android device (mobile phone), the scroll bar does not enable. ...

androidjqueryhtmlcsscordova

How can we parse the returned 'data' as HTML in JavaScript/jQuery to select more elements?

After receiving data from a webservice, it turns out that the data is just raw HTML without any XML headers or tags around it, but simply a piece of HTML code. <div class="Workorders"> <div id="woo_9142" class="Workorder"> <span ...

javascriptjqueryhtmlajax

Concealing a field when the PHP post is devoid of content

On page1.php, there is a form that, upon submission, redirects to page2.php where the selected information is summarized. The code snippet below on page2.php retrieves this information. I am attempting to dynamically hide certain rows if the PHP post is e ...

javascriptphphtmlforms

Tips on assigning a reference to an element that has not been rendered yet

I've created a login page with a button labeled "Watch the video". When the button is clicked, it hides and reveals a video player. My goal now is to automatically start playing the video once it's displayed without requiring an extra play button ...

htmlcssreactjsmaterial-uirefs

Tips for applying styles to elements that are not directly related when the parent element has a specific class using CSS

I have some HTML code structured as shown below. <div class='A'> <div class='B' /> <div class='C' /> </div class='A'> <div class='D' /> My Objective: If A contains C: ...

css

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

How to disable event.preventDefault on a hyperlink with a delay using jQuery or JavaScript

I need to disable event.preventDefault after a certain period of time on a hyperlink using jQuery or JavaScript. When I click on the link, it should redirect me to the specified href link after a delay because I need to send an AJAX request during that tim ...

javascriptjqueryhtmlsettimeout

Retrieve the Twitter user's profile picture

I am looking for a fast method to retrieve a Twitter profile image using either PHP or Javascript. My goal is to obtain the full image URL, not just the avatar size. Any code example would be greatly appreciated. Thank you! ...

phpjavascripthtmlapitwitter

Avoid a column from expanding according to its content by utilizing the grid-template property

Exploring the world of Css Grid, I'm delving into creating a unique layout with the grid-template Property: main{ width: 1444px; height: 70vh; display: grid; grid-template: 'cas cas cast' 'cas cas cast' ...

csscss-grid

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Tips on utilizing HTML tags in shiny context to highlight or potentially enlarge the font size for sprintf使

Can anyone help me figure out how to bold or increase the font size for my sprintf in R? I attempted the code below but it didn't work as expected. Instead of bolding the text, the "<strong" tags became part of the label. Any suggestions on how to ...

htmlrshiny

Styling the scrollbar for the PDF element on an HTML page

I have a div that contains an object "linked" to a .pdf file. Is it possible to customize the scrollbar style using CSS or JavaScript/jQuery? <div id="container"> <object data="document.pdf" type="application/pdf" ...

javascriptjqueryhtmlcsspdf

Organizing Bootstrap Columns

Currently, I am facing an issue with the footer section of the website I am working on. The problem lies in the order in which the elements are displayed. I would like the social icons to appear above the copyright symbol. Take a look at the footer. Here ...

htmlcsstwitter-bootstrapbootstrap-4

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Bootstrap 3: the collapse button disappears on smaller screens

I am working on creating a responsive navbar using Bootstrap's collapse feature for small screens. Take a look at the code for my navbar: %nav{:class => "navbar navbar-default", :id => "nav_inicio", :role =>"navigation"} .container-fluid ...

cssruby-on-railstwitter-bootstrap-3