Adaptive Design - Content Fragmentation

I am currently working on a webpage layout that has the following HTML structure:

<div class="row">
    <div class="col3">test 1</div>
    <div class="col3">test 2</div>
    <div class="col3">test 3</div>
</div>

In order to create a simple, responsive layout, I have applied the following CSS styles:

.row {
    width: 100%;
    display: block;
    padding-left: 1.25%;
    padding-right: 1.25%;
    margin: 0 auto 15px auto;
}
.col3 {
    width: 30%;
    display: inline-block;
    margin: 0 1.25%;
    border: none;
}

However, I have noticed that when I shrink the page to 30% of the screen's width, the last column drops down beneath the other columns.

I'm perplexed as to why this is happening. I would expect the columns to simply become narrower and adapt to the screen size without breaking the layout. What could be causing this unexpected behavior?

Any insights or suggestions would be greatly appreciated.

Screenshots:

htmlcssresponsive-design

Answer №1

The issue arises from using display: inline-block. By floating your columns to the left, they will function as intended.

With display: inline-block, any spaces or returns between elements with this property will be accounted for and displayed. It's like adding a single space between each inline-block element.

In my opinion, this is the major drawback of opting for display: inline-block instead of floats.

.col3 {
    float: left;
    width: 30%;
    margin: 0 1.25%;
    border: none;
}

If you choose to persist with display: inline-block, there are ways to address the spacing issue, but they are not recommended solutions. I would advise against implementing either of these workarounds.

No space between elements 

<div class="col3">test 1</div><div class="col3">test 1</div><div class="col3">test 1</div>

Comments between elements 

<div class="col3">test 1</div><!--
--><div class="col3">test 1</div><!-- 
--><div class="col3">test 1</div>

Answer №2

The issue you're experiencing is related to the following lines of code

.col3 {
    ..
    width:30%;
    margin: 0 1.25%;
    ..
}

When the width is set to 30% and the margin remains at 1.25%, as the container shrinks, the margin actually widens in relation to the container size due to the inline-block display type.

To resolve this issue, you can remove the margin line altogether or adjust the margin width to

margin: 0 1%;

This adjustment will correct the problem without having to worry about the limitations of inline-blocks.

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

Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully tar ...

csscss-selectors

How to Emphasize Html Select Element on Mobile Devices?

Is there a way to make the HTML select element on Android appear more distinguishable as a dropdown list, rather than just looking like plain text? Any suggestions for highlighting it so users can easily identify and select an option from this element? Up ...

androidhtmlcss

Eliminate the outline of the pager row in an asp.net grid view

Within my grid view, I have applied a bottom border to all cells. However, this border is also appearing on the pager row, which is not desired. To address this issue, I attempted to use jQuery to remove the border, but it seems that my selector is incorre ...

jqueryasp.netcssgridview

It is impossible for me to utilize inline SVG as a custom cursor in CSS

Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly: .container { width: 50vw; height: ...

htmlcsssvg

The pseudo class remains unaltered

I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...

htmlcsscss-selectors

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

javascripthtmlcssangular

Adding a detached element under certain conditions

When attempting to add a detached span based on a specific condition, I encountered the following situation. const arrow = d3 .create('span') .classed('arrow', true) .text('\u2192'); //d3.select('bod ...

javascripthtmld3.js

The Toggle Functionality necessitates a double-click action

I'm currently working on implementing a menu that appears when scrolling. The menu consists of two <li> elements and has toggle functionality. Everything is functioning properly, except for the fact that the toggle requires two taps to activate ...

javascripthtmlcss

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

cssnext.jstailwind-css

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...

htmlcsslayout

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

csssafaritransformgsap

Step-by-step guide on embedding a function in HTML using vbscript

I'm working on a dynamic HTML list that I want to enable or disable based on user input. Typically, you can just use the "enabled" or "disabled" attribute at the end of the select element to control the entire list. However, I'm unsure how to ach ...

htmlvbscript

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

javascriptjqueryhtmlcss

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

htmlcssresponsive-design

Div or box container with a CSS arrow sliced through

Is there a way to transition from a basic square menu to something more complex like this -> view image example Below is the CSS I've been using: .menu { width:50px; height:50px; display:block; background-color:red; overflow:hidden -ms-transform: ...

htmlcss

Understanding how much of a video stream has been viewed by a user using PHP

I am currently involved in a project that involves displaying video advertisements to users, and after 60 seconds, users are presented with a link. My supervisor wants to ensure that users watch the entire 60 seconds of the video. I am now wondering if th ...

phphtmlvideostream

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

htmlcssreactjs

Inscribe latitude from marker onto input field

Currently, I am working on a feature where markers are added to Google Maps API v3 by clicking on the map. Each marker then displays its coordinates in an info window. However, I am facing an issue with picking up the latitude and longitude values and inse ...

javascriptjqueryhtmlformsgoogle-maps-api-3