At a specific screen size, I need to rearrange three columns on my website.
Currently, the layout consists of two columns that are 1/4 width each with a 1/2 width column in between them.
I want to change the two 1/4 width columns into 1/2 widths and stack them at the beginning, but I'm having trouble achieving this using flexbox.
The challenge is getting the two 1/4 width columns to stack while still occupying 50% of the parent width.
You can view an example on JSFiddle.
In order to achieve this specific layout, it is crucial to switch the flex container to column wrap within the media query.
Additionally, a height must be defined for the container so that the items have a reference point for wrapping.
.col-container {
display: flex;
}
.col1of2 {
width: 50%;
background: red;
}
.col1of4 {
width: 25%;
background: yellow;
}
.col1of4--last {
background: blue;
}
@media all and (max-width: 1000px) {
.col-container {
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.col1of2 {
order: 1;
}
.col1of4 {
width: 50%;
}
}<div class="col-container">
<div class="col col1of4">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of2">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of4 col1of4--last">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
</div>I am in need of chaining filters. My goal is to implement the following filters: - A search filter - A checkbox styled price filter with pre-defined values such as <$10, $20-$50, $50+ - A checkbox styled filter for selecting 'topics' ...
What methods do professional web designers use to develop cross-browser compatible CSS? Is it typically a manual process, or are there specific toolkits available to simplify the task similar to YUI for JavaScript? I am looking to avoid WYSIWYG editors s ...
I am looking to animate SVG path elements with JavaScript instead of HTML. I have come across numerous articles discussing how to achieve this through JavaScript and jQuery by manipulating the attributes. Some helpful links I found: Fill color SVG path w ...
On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...
I am working on a multi-page meteor application where each page includes a navigation template. To switch between pages, I am using iron-router. The user's current page is indicated by setting the appropriate navigation link's class to 'ac ...
I am currently working on a website utilizing the Genesis framework for WordPress. My main goal is to create a straightforward, full-width responsive layered banner. However, I have encountered an issue where this design is always confined within the cont ...
Is there a way to make the icon change back when clicked again without making major changes to the existing code? Looking for suggestions on how to achieve this functionality. function myFunction() { var element = document.getElementById("demo"); el ...
Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...
I am relatively new to d3.js and currently working on building a simple application. However, I have encountered a roadblock in my progress. I have a separate JavaScript file named jack.js which generates a pie chart when linked with an HTML page. The Iss ...
I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...
Chapter One <button class="btn btn-outline-primary btn-sm btn-block " >Place order</button> Chapter Two <button class="simplepicker-btn" >Show Date Picker</button> > <script> > let simplepicker = new SimpleP ...
I'm trying to dive into learning about using a canvas, but I just can't seem to get this basic code to work. Does anyone know what I might be doing wrong? Link to jsfiddle <canvas id="ctx" width="500" height="500" style="border:1px solid #00 ...
My experience has been primarily on Chrome. I've noticed that when I scroll for a long time, the data on the screen disappears briefly and then reappears after a few seconds. Is there a resolution for this problem? Thank you, ...
<div class="container"> <div class="row"> <div class="col-lg-9"> <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> <div id="demo" class="collapse"> <p> Isaac Newton (4 January 1643 – 31 March 1727) w ...
Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...
I am facing a challenge with stacking 3 images: an outline, a white base, and a pattern that is also white. My goal is to layer these images where the base is at the bottom with one color assigned to it, the pattern is stacked on top with a different color ...
I am striving to craft a series of divs that feature varying levels of opacity in their background colors, creating a gradient effect. In an attempt to achieve this, I utilized a variable linked to the ID of each individual div. Unfortunately, my efforts ...
Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...
A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...
finance_charts_json_callback( { "meta" : { "uri" :"/instrument/1.0/PTC/chartdata;type=quote;range=1d/json/", "ticker" : "ptc", "Company-Name" : "PTC Inc.", "Exchange-Name" : "NMS", "unit" : "MIN", "timezone" : "EDT", "curr ...