Unique fluid layout with varied behavior

I am on the hunt for a layout that caught my eye some time ago, but unfortunately I forgot to save it. It featured 3 main columns that cleverly transformed into 2 when resized, causing the 3rd column to shift to the row below. It wasn't your typical layout adjustment with overflow.

As it resized, all 3 columns maintained the same width until they reached a certain threshold, at which point each one occupied 33% of the width while increasing in height. The only noticeable change was in the text size. Then, during further resizing, one column would drop down to the next row, allowing the 2 remaining columns to expand and fill up the entire width (50% each) while the dropped column took up the full 100% width of its new row. Despite extensive Googling, I couldn't pinpoint the exact terms due to not being a native English speaker. I distinctly remember that the layout worked flawlessly in the demo using only CSS and HTML.

EDIT: The container holding the 3 columns maintained the same width throughout the resizing process.

Answer №1

Using media queries could be the solution you're looking for. By specifying different styles based on the width of the browser window, you can achieve the desired effects.

For example, if you want to target devices wider than 900px, you can use:

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

For more information on media queries, check out this resource.

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 steps should I take to ensure the height of this navigation bar is correct?

I'm attempting to ensure that this div displays the correct height (without manually specifying a fixed number like 75px). Here's how I want it to appear: ------------------------------------------ | something | something else | --- ...

Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...

Include some text before and after the bar element

I am attempting to insert text preceding and succeeding the bar, as depicted in the image below. <div class="container"> <div class="progress progress-info progress-striped"> <div id="storage-component" class="bar" style="wi ...

Using CSS to showcase div elements with varying dimensions

How can I arrange divs with varying heights to be positioned close together, regardless of their height, and with a specific margin similar to buildings? I am aiming for a layout like the one on this website . I tried using float:left but it only float ...

JavaScript | Determining the coordinates of where on the image X and Y were clicked

My goal is to determine the position of an x and y location when a user clicks on an image. This information will be used to add a spot to the image that displays relevant information. The content for the spot will be dynamically loaded from a SQL database ...

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

I'm currently following a tutorial on how to create responsive layouts with Bootstrap 4 and Angular 6. You can find the tutorial here. I've reached a point where I need to import styles-variables.scss in my styles file, but I keep encountering t ...

Navigational bar customization: Troubleshooting search button functionality

I've been encountering some challenges with the search form in bootstrap 4.1's navbar. I've been referring to this documentation link for assistance. The search form I have set up appears quite typical for bootstrap: https://i.sstatic.net/I ...

Using either Java or Groovy, iterate through a hashmap and showcase an HTML table within a Velocity template

Just a heads up: Some users may have trouble reading code comments. For the record, this is not related to any homework assignment. I'm attempting to combine HTML and a hashmap for the first time. Despite searching for explanations online, nothing see ...

Tips for creating two HTML buttons to switch between images

I have a pair of robot images, one displaying the front and the other displaying the back. I am looking for HTML or CSS code to switch between the two images by clicking on them, without using JavaScript or jQuery. I came across a helpful tutorial on this ...

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

How can I effectively store an HTML page with CSS in a MYSQL database? Is this even feasible? What type of column should be used for storage? And how can I retrieve the stored formatted HTML and display it correctly using PHP? If the page contains imag ...

Accessing firebase using a connection to HTML5 through codeanywhere's devbox

Recently, I added Firebase to my CodeAnywhere HTML5 connection. However, when I tried to execute the shell command firebase login, I was directed to a URL to log in. Despite successfully logging in and granting the necessary permissions, I encountered an e ...

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

Utilizing CSS to transform text with a sleek, animated writing effect

I have utilized CSS to create a captivating animation effect where text is written out in a smooth style. I am seeking assistance in replacing the current text with a different one while maintaining the same effect. HTML & CSS .typed-out{ overflow: ...

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

Utilizing PHP to send emails via an HTML form

I spent all day attempting to send an email from my HTML contact form using PHP, but I'm struggling as a beginner. When I uploaded the form to free web hosting, I received a "success!" message upon submission, yet no actual email was sent. Any assist ...

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...