CSS - Aligning div below the other one does not function properly on compact screens

Currently, I am utilizing the zurb-foundation as a CSS framework for my layout. Within this layout, there is a header consisting of a title bar and two divs. The left div occupies 4 columns on larger screens, while the right div takes up 8 columns. The right div contains an image that spans the entire width of the div. On smaller screens, my intention is for the left div to move below the right div. However, I am encountering an issue where the left div disappears under the right div on small screens. Below is the HTML code snippet:

<div class="header row row-wrapper">
    <div class="frontpage-header-content">
      <?php while ( have_posts() ) : the_post(); ?>
      <div class="large-4 medium-12 columns lcol">
        <h3><?php the_title(); ?></h3>
        <div class="border"></div>
      </div>
      <div class="large-8 medium-12 columns rcol">
        <div class="hero-image-wrapper">
          <?php the_post_thumbnail(); ?>
          <div class="overlay"></div>
        </div>
      </div>
    </div>

    <div class="header-title-bar">
      <div class="row">
        <div class="large-12 columns">
          <div class="title-bar">
            <div class="title-bar-left">
              <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
              <span class="title-bar-title">Menu</span>
            </div>
            <div class="title-bar-right">
              <span class="title-bar-title">Support Association for Cancer Patients</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.header -->

Below is the corresponding CSS code:

.header-title-bar {
    position: absolute;
    top: 0;
    width: 100%;
}
.header .columns {
    padding-right: 0;
}

.hero-image-wrapper .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: rgba(255, 255, 255, .3);
}

@include breakpoint(medium down) {
    .row-wrapper{
       width :100%;
       display: flex;
       flex-flow: row wrap;
    }
    .lcol{
       float:left;
       order: 2;
    }
    .rcol{
       float:right;
       order: 1;
    }
}

You can view the fiddle to see the issue in action. I am unsure which part of the CSS is causing this problem since it works fine in isolation, without the interference of other CSS from external scripts in the fiddle.

Answer №1

The issue arises when you enclose columns within:

<div class="frontpage-header-content">

To prevent unexpected behavior like this, it is advisable to adhere to the correct structure and nesting of columns:

<div class="row">
    <div class="large-12 columns">
    </div>
</div>

If you place elements between rows and columns or if you never nest columns inside rows, you will disrupt the grid.

https://jsfiddle.net/wqupzmLw/

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

Unable to modify element attributes in css with tag selectors

I recently started my journey in the field of Web Development with Angela Yu's Web Development bootcamp. Currently, I am utilizing bootstrap v5, html5, and CSS3. While working on a project, I encountered an issue where I wasn't able to modify th ...

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

Combine linear and radial background effects in CSS styling

I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following ...

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

switching tabs on a webpage

My PHP page has a menu tab with tabs labeled as Dash and Project. The Dash tab contains a table displaying data. The scenario is that when I click on a row in the table within the Dash tab, it should navigate to the Project tab, where a simple form is disp ...

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

What is the proper placement for index.html <head/> class helper functions within a ReactJS Component?

My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, ...

Tips for applying a custom design to your MUI V5 styled component

How do I customize the style of a button component in MUI V5? I've been trying to combine old methods with the new version, but it's not working as expected. import { Button } from "@mui/material"; import { styled } from "@mui/mate ...

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Currently working with Angular Material 16 and I have a question regarding the height of buttons inside the mat-menu element. Here is an example of the code: <button mat-icon-button> <mat-icon>more_vert</mat-icon> </button> ...

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

how to make a div scroll after reaching a specific pixel distance

Hi there! I'm working with a DIV that has a width of 1600px. I'm wondering if there's a way to implement a feature within the DIV that fixes the first 200px and adds an automatic scroll for the rest of the content. Do you know of any CSS tr ...

Discover the power of utilizing JavaScript to sort through table rows by filtering them based on the selections of multiple checkbox

How can I create interdependent logic for checkbox sections in a form to filter based on all selections? I am looking for help with my code snippet that showcases checkboxes controlling the visibility of table rows: $(document).ready(function() { $(" ...

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

The PNG image that is stored in the MySQL database is not displaying completely on the web browser

Here are the PHP codes from index.php <?php include("connection.php"); $sql = "SELECT prod_cost, prod_name, prod_image FROM products"; $result = mysqli_query($con, $sql); $row = mysqli_fetch_all($result, MYSQLI_ASSOC ...

The script from 'URL' was declined for execution due to its MIME type of 'text/html' which is non-executable, in addition to strict MIME type checking being enabled

I encountered an error stating "Refused to execute script from 'URL' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." The code that triggered this error is shown below. <!DOCTYPE htm ...

Setting the innerHTML of the document body to "<P><HR>" can result in failure on Internet Explorer

Our software utilizes an embedded IE control, and we have encountered an issue where setting: document.body.innerHTML to <P><HR> triggers an OLE exception with the message "Unknown runtime error". This behavior was replicated in the IE brows ...

Links are functional in browsers, but seem to be unresponsive on iPad devices

I'm currently developing a website that allows users to navigate using swipe gestures. Each slide contains multiple links that should redirect users to different locations upon clicking. However, I've encountered a bizarre issue where the links a ...

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...