I have this specific design that I need help with:
This design is intended for desktop or larger screens only.
Note: The red and green boxes in the design are not of equal height.
https://i.sstatic.net/snAKt.png
For mobile devices or smaller screens, the layout changes to:
https://i.sstatic.net/zDOyN.png
Can someone guide me on how to achieve this layout using either Bootstrap 4 grid or custom CSS grid? Which option would be more suitable for this design?
Thank you and have a wonderful day!
To create a layout resembling masonry-like columns, utilizing the standard Bootstrap grid system may not yield the desired outcome. Instead, integrating card columns or JavaScript masonry plugins would be necessary.
<div class="container">
<div id="example" class="card-columns">
<div id="card1" class="card border-success">
<div class="card-body">
<p class="card-text">Card #1 - height: 20rem;</p>
</div>
</div>
<div id="card2" class="card border-success">
<div class="card-body">
<p class="card-text">Card #2 - height: 12rem;</p>
</div>
</div>
<div id="card3" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #3 - height: 18rem;</p>
</div>
</div>
<div id="card4" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #4 - height: 14rem;</p>
</div>
</div>
</div>
</div>
By applying minimal styling adjustments to configure 1 column for mobile view and 2 for other devices:
#example.card-columns {
column-count: 1;
}
@media(min-width: 576px) {
#example.card-columns {
column-count: 2;
}
}
You can achieve a layout that closely resembles your vision:
https://i.sstatic.net/4fyy8.png
View demo here: https://jsfiddle.net/davidliang2008/n3fhyp8c/60/
However, an issue arises when viewing the layout on mobile devices due to the default CSS column order (top-bottom, left-right) which cannot be modified. To address this, duplicating content and toggling visibility based on screen breakpoints is required...
In case you intend to place both red boxes in the middle position (as per assumption):
<div id="card1" />
<div id="card2" class="card border-success d-none d-sm-block">
...
</div>
<div id="card3" />
<div id="card4" />
<div id="card2" class="card border-success d-block d-sm-none">
...
</div>
With this adjustment, you can achieve the desired display on mobile screens:
https://i.sstatic.net/WQQN2.png
View updated demo here: https://jsfiddle.net/davidliang2008/n3fhyp8c/63/
Currently working on a React App. Started by deploying on GH page with SASS, but encountered an issue. Can anyone provide guidance on resolving this? Unsure of the specific code needed, so just looking for which part of code is necessary to add. https:/ ...
I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...
I'm facing an issue with the positioning of elements that I don't usually encounter. I simply want the subscribe button to be 20% wide and positioned to the left of the input form. Despite trying various methods like block display, inline, or fl ...
Related Questions: Changing all links to // Network-Path Reference URI / Scheme relative URLs I have noticed some websites using the following format: background:url(//cdn.domain.com/images/bg-normal.png) They utilize "//", which the browser aut ...
I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the ...
I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...
I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...
I need to adjust the loading order of styles in my current project. In my custom stylesheet style.css, I've made some overrides, body { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; ...
I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...
Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...
Is there a way to achieve an effect similar to Position Relative in CSS using jQuery? I have developed a tooltip that I want to attach to various objects like textboxes, checkboxes, and other text elements. My code looks something like this: <input i ...
I have a website's contact page where there is a phone number and I want to create a code that can identify this specific phone number and replace it with a new one. Below is the code snippet: <div class="elementor-widget-container"> < ...
My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...
I'm having trouble with my footer always being covered by dynamic content on my page. How can I adjust the CSS to make sure the footer stays at the bottom and adjusts to the size of the content? Here's the current CSS code for the footer: div ...
Looking for help on how to eliminate the space between the right side of an input textbox and a red border? Check out these examples: IE: http://jsfiddle.net/fQHGA/ <div style="float:left;border:1px solid red"> <label style="float:left">a ...
How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...
Interacting with jQuery: $("#type_name").click(function(){ $("body").append('<div class="modalOverlay">'); $("#add_form").fadeIn(1000); $("#first_name").val(""); $("#email").val(""); ...
I'm trying to figure out how to stop the infinite auto-scrolling and make it display per page when clicking the right arrow. Any ideas? $('.carousel.carousel-multi .item').each(function () { var next = $(this).next(); if (!next.leng ...
the webpage I need help with is (issue with general menu drop down) Hello I recently decided to enhance my menu by incorporating icons. I had successfully implemented a drop-down menu using only HTML and CSS, but when I attempted to add icons next to ea ...
I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...