I have utilized flexbox to rearrange the boxes. Here is a link to the demo code
My issue arises when resizing for smaller screens; I need to place B between A and C.
https://i.stack.imgur.com/M0dpZ.png
Any suggestions on achieving this goal? Thank you in advance.
grid is the essential grid-system needed for this specific layout.
Here's a concise example
/* creating a 2-column grid */
.main {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 20px;
}
/* span b across 2 rows */
.b {
grid-row: span 2;
}
/* reset the grid on small screens */
@media (max-width: 639px) {
.main {
display: block;
}
}
/* initial styles for backgrounds */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}<div class="main">
<div class="a">A - I have some content</div>
<div class="b">B - I have some content</div>
<div class="c">C - I have some content</div>
</div>To achieve this layout, a bit of HTML and CSS tweaking is necessary. Ensure to place your media query at the end so it takes precedence ;)
For more details on using grids, visit https://css-tricks.com/snippets/css/complete-guide-grid/
Here is a clever solution that combines all classes A, B, and C in one container:
HTML code :
<div class="main">
<div class="container-1">
<div class="a">A - I contain some content</div>
<div class="b">B - I contain some content</div>
<div class="c">C - I contain some content</div>
</div>
</div>
CSS code :
.a {
background-color: red;
height: 20px;
}
.b {
background-color: green;
height: 30px;
}
.c {
background-color: blue;
height: 20px;
}
.container-1 div{
width: 45%;
display: inline-block;
}
@media (max-width: 639px) {
.container-1 div {
width: 100%;
display: block;
}
}
In my opinion, utilizing the grid layout instead of flexbox would make things simpler:
HTML
<div class="container">
<div class="item-a">a</div>
<div class="item-b">b</div>
<div class="item-c">c</div>
</div>
CSS
.container {
display: grid; /* Consider placing this property inside a media query if you don't want any gap between items */
gap: 1rem; /* To set a gap between items */
}
.item-a {
background: red;
}
.item-b {
background: green;
}
.item-c {
background: blue;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item-a {
grid-area: 1 / 1 / 2 / 2;
}
.item-b {
grid-area: 1 / 2 / 3 / 3;
}
.item-c {
grid-area: 2 / 1 / 3 / 2;
}
}
.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://useloope ...
In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet: <div id="myGall ...
Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...
I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...
I am currently trying to determine if the color of a specific page changes immediately after clicking on a button designed to alter the color of an element within that page. My goal is to extract the RGB value stated as rgb(183,168,168); in this particul ...
Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...
I am experiencing an issue with the jumbotron images on my website where they become increasingly zoomed in as the screen size decreases, and are extremely zoomed in on mobile devices. Is this a normal behavior of jumbotrons? I do understand that the image ...
Is there a way I can implement an if condition in my HTML file within Codeigniter that checks the URL? Depending on whether or not it contains part of the URL, it would perform different actions. For instance: The initial URL is localhost/index.php/ca ...
I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...
I'm currently working on customizing my Angular Material datepicker by adding a button. The goal is to have this button placed in the top right corner and enable it to close the datepicker when clicked. In addition, I also want to include extra conte ...
I am working on an animation within my Angular application @Component({ selector: 'app-portfolio', templateUrl: 'portfolio.page.html', styleUrls: ['portfolio.page.scss'], animations: [ trigger('slideInOut&apo ...
I am currently facing some challenges getting the circle loader to work correctly. Although I can handle basic animations, the code I found on CodePen is a bit more advanced than what I am used to. I am using it as a learning experience to understand how i ...
https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...
I am working with a table where one column displays the employee ID, and I would like to show their names when hovering over it. Can someone assist me with this task? ...
I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...
Is it possible to apply a background color to specific selected text from a Text area and display it within a div? let elem = document.getElementById("askQuestionDescription"); let start = elem.value.substring(0, elem.selectionStart); let selection = ...
Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...
I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...
Is there an easy and straightforward method to customize radio buttons using only CSS, allowing me to click on an image instead of a traditional bullet point? For example, like thumbs up/thumbs down. I have two radio buttons that need to track which one i ...
Could someone help me understand why the background color is not showing on my website? This is the CSS I am using html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizi ...