How can I align the expanded card div to the center when the media screen reaches a max-width of 992px/768px?
Currently, when I expand the div, it is not centered. What flex property should I use and how should I apply it?
The grid layout shifts and the cards next to the expanded div become misaligned in this demo.
To see the resizing effect, you'll need to view it in full window or resize your window.
This task presents a challenge due to the interdependency between each card_expander, its parent card, and their positions. The alignment of the card_expander is relative to its parent rather than the page when centered.
https://i.sstatic.net/VQIkx.png
https://i.sstatic.net/jXAX2.png
To address this issue, one approach could be adjusting the positioning of each card_expander.
var $cell = $('.card');
//open and close card when clicked on card
$cell.find('.js-expander').click(function() {
var $thisCell = $(this).closest('.card');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
if ($cell.not($thisCell).hasClass('is-inactive')) {
//do nothing
} else {
$cell.not($thisCell).addClass('is-inactive');
}
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
}
});
//close card when click on cross
$cell.find('.js-collapser').click(function() {
var $thisCell = $(this).closest('.card');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
});@charset "UTF-8";
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
transition: all 0.2s ease-in-out;
/* ---------- HERE ---------- */
display: flex;
flex-direction: column;
}
@media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
@media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
/* ---------- HERE ---------- */
@media screen and (min-width: 768px) {
.card:nth-child(odd) .card__expander {
...
}Currently learning about node.js and faced with an interesting challenge - Create a program to identify and display the largest prime number that is less than or equal to N. Input // Output - 13 // 13 126 // 113 26 // 23 During my previous course with ...
While working on my website's design, I came up with an idea but wasn't sure how to execute it. After searching extensively, I couldn't find a helpful solution. Can anyone here lend me some assistance? My idea involves using border: 10px do ...
I'm currently working on automating a website with selenium webdriver. The issue I'm encountering is that when I try to click on a menu item, the submenu pops up (actually a misplaced dropdown, UI issue), and although I can locate the element of ...
This code is functional, but I've been contemplating whether it could benefit from implementing closure. Let me explain. What I aim to achieve is: $(".trigger").click(function() { $(this).parents(".heading").next(".list").slideToggle("slow", ...
As I iterate through the cardArray, I display the title of each card. If a card has a special property greater than 0, I also include the description of that special type from another array called specials. The loop seems to be either working perfectly an ...
Does anyone know how to manipulate binary files in Javascript similar to C? I'm currently facing a critical scenario where I need to create a flipped image. Unfortunately, I don't have access to CSS, canvas, HTML, or the DOM - so I need to accomp ...
Currently working on a tutorial from the MEAN Machine book, specifically the chapter on route APIs. If you want to see the complete code, it's available here: https://gist.github.com/leongaban/6db44e513db4ca9e784f The code below shows how to fetch a ...
While working on a responsive login layout using Bootstrap 5, I encountered a strange issue. The design looked fine in the web view, but when switching to mobile view, the md and sm breakpoints didn't trigger as expected. However, after pasting the co ...
Is there a way to combine a dynamic classname and a static one effectively? <div class=<%="#{getClass(app.status)} two" %> What happens is <div class="one" two> Instead of the desired output of <div class="one t ...
After integrating i18next into my application and fetching data from the backend (i18next-xhr-backend), I encountered an issue. Although there were no errors, the translation was not functioning as expected. I am using Vue along with Webpack. Below is a s ...
I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...
It seems like uploading a file should be straightforward. However, I'm struggling with understanding blobs. function createFileUploader() { var app = UiApp.createApplication(); var panel = app.createVerticalPanel().setId('panel'); v ...
I'm encountering an error when trying to activate the date picker, but I'm not sure why it's happening. Any assistance would be greatly appreciated. The error message is as follows: "value.getTime is not a function. (In 'value.ge ...
My project is focused on Asp.net Mvc and I am encountering a challenge in displaying multiple model data in one view. However, I do not want to showcase it in a list or grid format, instead, I prefer a Form View style. The two modal classes involved are Pr ...
Although I have experience in developing with .NET, I am new to Node.js and intrigued by its advantages. I believe it is a great way to maintain code and promote reusability. However, I am faced with a dilemma. I understand that Node.js allows for creatin ...
Having difficulty aligning text with innerHTML I am trying to create a link element using JavaScript, but I cannot get the text to align to the center. Here is my code: a= document.createElement('a'); a.style.cssText= 'font-size: 20px; curs ...
Currently, I am working on implementing a debounce effect in my useEffect. The issue is that the function inside it gets called as soon as there is a change in the input value. useEffect(() => { if (inputValue.length > 0) { fn(); ...
I am in need of a scrolling set of divs that functions like a slide show. I have been searching for a solution but haven't found one yet. Is there a way to make the commented-out div scrollable by clicking somewhere on the page or an arrow image? I wa ...
I'm trying to set up a preview mode in one controller to show an image in another controller using an angular service. However, I'm struggling with the final step of getting the URL from the passed parameter into the ng-src in SideMenuCtrl dynami ...
Having difficulty with word spacing within a div using spans. Take a look at the following HTML code: <div class="footer-links"> <span><a href="#">Suggestions</a></span> <span>&l ...