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;
}
}
Is there a way to update a database by entering text into a text box and submitting it, with the data being sent to the database with a specific id? The code snippet below outlines what needs to be done, but it seems to trigger a 403 error: Access forbid ...
Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...
On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...
Currently, I am extracting cricket schedules from a specific website using Python's Beatiful Soup library. The webpage I am scraping corresponds to the following URL: www.ecb.c0.uk/stats/fixtures-results?m=1&y=2016 This particular link displays ...
I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...
I am looking to position an image in front of text and center it. <div id="info"> <ul> <h3> <li>NAME: Mohit Kumar Singh</li> <li>CONTACT:1234567890</li> <li>ADDE ...
Struggling with implementing jQuery autocomplete in a form with a long list of names in a dropdown select tag. The current code is not functioning as expected. public function executeNew($r) { $this->getResponse()->setContentType('applicat ...
Is there a way to dynamically add an "active" class to an element based on the href? This is what my template in Django looks like: <div class="panel side-panel-1 category"> <h4 class="title1">Sections</h4> <ul class="clear-list"> ...
Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...
I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...
Let's set the scene: This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the rig ...
I am utilizing vue-select to generate a standard drop-down menu. However, it comes with a search bar by default that I do not need and prefer to keep it simple. I attempted to hide the search bar by using "display: none" which made it disappear. This is t ...
Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...
<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...
This specific file is structured in JSON format shown below: { "ClusterName": { "Description": "Name of the dbX Cluster", "Type": "String", "MinLength": "1", "MaxLength": "64", "AllowedPattern": "[-_ a-zA-Z0-9]* ...
Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...
Within the userDB.json file, it appears as follows; [{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Inside the app.js file ; async function getUsers() { le ...
Recently, I came across this piece of Javascript code which is causing me some trouble: function call() { popup = window.open('http://www.google.co.in'); setTimeout(wait, 5000); } function caller() { setInterval(call, 1000); } func ...
As I embark on my React project, I've been tasked with creating a CSS using TypeScript while referring to the color palette diagram provided below. Utilizing createMuiTheme to build the theme, I've realized that there are various possible conditi ...
Each day the same question seems to pop up, yet this particular issue has me stumped... My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen. Everything ...