Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths adjusted by the class "col-sm-x":

Below is my current markup and CSS:

CSS

.red{ background-color: red; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.yellow{ background-color: yellow; }
.purple{ background-color: purple; }

.home-height-single{ min-height: 50px; }
.home-height-double{ min-height: 100px; }

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}

Markup:

<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col">
        <p>8</p>
    </div>
</div>

The current result is displayed below, where div 8 is not filling the gap:

JSFiddle - Showing the issue

I am aware that I could use 2 columns and wrap the divs in 2 parent divs, but I prefer to avoid this. This is because, for mobile view, I intend to position divs 2 and 4 side by side rather than stacked, which may not be achievable if the divs are wrapped in 2 columns.

For instance, my mobile layout is planned to resemble this once the current issue is resolved:

htmlcsstwitter-bootstraptwitter-bootstrap-3css-float

Answer №1

Utilize the power of jQuery

$(function(){ 
    var element = $(".row div:last-child"); 
    element.css('top', element.height() * -1); 
    $( window ).resize(function() {
        if($( window ).width() < 768){
            element.css('top', 0); 
        }else{
            element.css('top', element.height() * -1); 
        };
    });
})

Check out the Fiddle

Also, please share if you discover any css-only solution.

Answer №2

After some tinkering, I was able to correct the layout problem by making a slight adjustment to my CSS media query:

@media (min-width: 768px) {
    .row {
        position: relative;    
    }
    
    .b-col {
        float: right;
    }

    .b-col:last-of-type {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

Link to Functional JSFiddle

Answer №3

To make element #8 stand out, adjust the top margin to be negative (-50px).

http://jsfiddle.net/72vjc/2/

<div style="padding: 30px; color: #ccc;">
<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col" style="margin-top:-50px">
        <p>8</p>
    </div>
</div>

Upon adjusting the width to col-sm-1, the element remained in place without moving up, leading me to believe it was a margin related issue.

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

What is the best way to set up an anchor element to execute a JavaScript function when clicked on the left, but open a new page when clicked in

One feature I've come across on certain websites, like the Jira site, is quite interesting. For instance, if we take a look at the timeline page with the following URL - When you click on the name of an issue (which is an anchor element), it triggers ...

javascripthtmlvue.jsvue-router

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

javascriptjqueryhtml

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Retrieve the text value from a single object by utilizing jQuery

I am struggling with customizing a product page that lists various products in a list format. My goal is to create an alert that displays only the name of the product when clicked, rather than showing both the name and price as it currently does. Can someo ...

javascriptjqueryhtml

What could be the reason that the results of my quick sort function are not appearing on the screen

I'm having trouble getting any output from this code. Can someone help me figure out what's wrong? function Ascending() { var array = new Array(); array[0]=parseInt(document.getElementById("1").value); array[1]=parseInt(document.getElementById(" ...

javascripthtmlsortingquicksort

"Integrating backgrounds into divs disrupts the overall design aesthetic

One of the challenges I faced was trying to space out the three columns in my Bootstrap row while also splitting each column into two parts. After doing some research, here's the solution I came up with: <div class="container row h-100 mx-auto ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to display a Tooltip automatically without needing to hover using only CSS

I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...

javascripthtmlcsstooltip

SVG failing to display properly

I need to place a close button in the top right corner of my page. Here is the code for the SVG: .icon { width: 24px; height: 24px; /* any changes to the fill attribute have no effect */ fill: currentColor; } <svg class="icon"> &l ...

htmlcsssvg

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

Currently, I am working on developing a stopwatch that is functional. However, I am facing an issue where the text overlaps itself when it changes due to repetitive drawing. Removing the strokeText and fillText from the interval prevents it from changing a ...

javascripthtmlsetintervalstopwatch

What is the process for incorporating a Bootstrap link into a specific ReactJS file?

In my current project using React JS, I found the need to incorporate Bootstrap in certain pages. To do this, I initially placed the following code snippet in the Public folder within index.html: <link rel="stylesheet" href="https://netdna.bootstrapc ...

javascriptcssreactjsbootstrap-4

Activate video in Slick Slider with the click of a button

I am facing an issue with my slider setup, where each slide contains a video as the background along with play/pause buttons. When I try to play the video by clicking the corresponding button on a specific slide, I encounter this problem: if I click the pl ...

javascriptjqueryhtmlvideoslick.js

Discovering the offset location using touchmove

Struggling with a code for dragging/moving an element via touchscreen. The code is functional, but encounters a common issue - unable to drag from the touchpoint itself. Every movement initiates from the edge of the element, no matter where the touch begin ...

javascriptcssoffsettouchmove

There seems to be an issue with the input field where the initial data is not loading when the ui-mask

Take a look at the table code below: <table class="me-checkbox-table"> <thead> <th class="checkbox-column"> <md-checkbox md-no-ink aria-label="Check all"></md-checkbox> </th> <th>sku#</ ...

htmlangularjsangular-ui

The validations continue to function properly even when HTML has been removed

In my form, I have implemented an "addmore" functionality that allows users to dynamically add a set of HTML input fields. Users can also remove the added rows if needed. While everything is functioning correctly, I am encountering an issue where validatio ...

javascriptphpjquerytwitter-bootstrap-3formvalidation-plugin

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

javascripthtmlselectalignment

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

htmlcss

Unable to display favicon when using the include function

How can I add the favicon link to my website? In my header.php, I have added the link for my ico favicon, but when I try to include it in my index file, the favicon does not show up. I attempted to insert the favicon code directly into the index.php file, ...

phphtmlinclude

Dropdown element with PrimeNG adorned with a span

I am trying to create a simple form with text inputs and dropdowns. I have successfully implemented the textInput, but I am struggling with the dropdowns. Below is the code that I have so far: <div class="p-grid p-dir-col p-offset-2"> ...

htmlcssangularprimeng

What is the best way to center a div horizontally on all screen resolutions using only CSS?

The margin: 0 auto declaration is not having the desired effect for some reason. I have attempted using text-align in the header, as well as exploring various other options, but none seem to be working. This is my current code: div.middle { font-fami ...

htmlcsscenter

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs