I’ve a row of sq. tiles (event-tile) line dup accross the underside of the display screen. These tiles are nested inside a container (.contentContainerBottom) working throughout the underside of the display screen. Every tile has key data, Begin and Finish time, Occasion Identify, and get collectively time (event-congregation) with a observe up time (next-congregation).
I’m attempting to;
-
lay these tiles so they’re lined up equally throughout the .contentContainerBottom. This works nice.
-
Begin and Finish time to be on the Prime left and Proper Nook retrospectively with a label ‘Free Interval’ the place relevant. This works nice.
-
Occasion Identify to be centered horizontally beneath the information in level #2 as fastened place, with its personal font measurement and format.
-
event-congregation to be centered horizontally and positioned beneath the occasion identify with its personal with its personal font measurement and format.
-
Subsequent-congregation to be centered horizontally and positioned beneath the event-congregation with its personal with its personal font measurement and format.
For visible aestetic, I’m attempting to get the event-name, event-congregation and next-congregation to be on the similar vertical degree in every of the tile. Hope this is smart.
PROBLEM STATEMENT:
-
I’ve tried rejigging and restructuring the CSS however can’t appear to get the visible look I want. Word not all occasion may have a followup time displayed (next-congregation), subsequently the place there’s a next-congregation it pushes the information in level #3 and #4, subsequently making a vertical mislaignment accross the all of the event-tiles.
-
In attempting to resolve the issue, I’ve observed all of the nested containers s appear to get overidden by the .event-tile parameters. I believed the parameters disclosed later within the CSS take precedent – I should be mistaken right here?
HELP REQUIRED
- Why is .event-tile overiding the parameters contained in the <DIV .contentContainerBottom>
- What can I do to resolve the issue statements?
I’ve tried to incorporate the related CSS parameters and the HTML. This structure is a part of a wider display screen structure (vertical panel/container) which appears to work nice. The one distinction I’ve between the vertical and the underside is the next setup;
Vertical Panel
<div id="contentContainerTopRight"></div> adopted by nested <DIV>s
Backside Panel
<div id="schedule" class="contentContainerBottom"> adopted by nested <DIV>s
Mainly each panels are displaying the identical information with the vertical displaying some additonal information.
/* ==========================
✅ Base Format Kinds
========================== */
html, physique {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
peak: 100vh;
width: 100vw;
background-color: black;
}
/* ==========================
✅ Normal Tile Kinds
========================== */
.event-tile {
flex: 1;
text-align: heart; /* Heart textual content horizontally */
show: block; /* Reset to dam if flex was inflicting points */
padding: 1px;
margin: 1px;
border-radius: 5px;
font-size: 2rem;
coloration: white;
flex-shrink: 0;
overflow: hidden;
/* white-space: nowrap; Wrap the occasion identify tp new line if req'd.*/
text-overflow: ellipsis;
place: relative;
z-index: 1; /* Decrease z-index than the date-time aspect */
}
/* ==========================
✅ Backside Container - Single Row Format
========================== */
.contentContainerBottom {
show: flex;
place: relative; /* Guarantee youngster parts could be positioned completely */
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch; /* Guarantee all tiles are similar peak */
peak: 15vh;
width: 100vw;
background-color: #333;
padding: 5px;
box-sizing: border-box;
}
#contentContainerBottom .event-tile {
width: auto;
max-width: 100%;
font-size: calc(1rem + 0.3vw); /* Modify font measurement dynamically */
overflow-wrap: break-word; /* Stop overflow */
}
#contentContainerBottom .event-header {
show: flex;
place: relative;
width: 100%;
flex-direction: column; /* Align kids vertically */
justify-content: space-around; /* Distribute kids evenly */
align-items: heart; /* Heart kids horizontally */
peak: 100%; /* Guarantee it takes the total peak of the mother or father */
}
#contentContainerBottom .schedule .event-name {
font-size: 0.7em;
padding: 1px;
font-weight: daring;
background-color: inexperienced;
}
#contentContainerBottom .event-congregation {
coloration: #FFD700;
show: flex;
justify-content: heart; /* Heart horizontally */
align-items: heart; /* Heart vertically */
font-size: 2rem;
font-weight: daring;
margin-top: 5px;
text-align: heart; /* Fallback for older browsers */
}
#contentContainerBottom .next-congregation {
font-size: 1.5rem;
coloration: #FFD700;
}
/* ==========================
🎨 Tile Standing Colours
========================== */
.tile-past {
background-color: #555;
}
.tile-current {
background-color: #4CAF50;
}
.tile-upcoming {
background-color: darkorange;
}
.tile-future {
background-color: #2196F3;
}
.tile-alert {
background-color: darkred;
}<div id="schedule" class="contentContainerBottom">
</div><div class="event-tile horizontal-tile tile-past">
<div class="event-time-start">7:36 PM</div>
<div class="event-time-makrooh">FREE PERIOD</div>
<div class="event-time-end">7:51 PM</div>
<div class="event-header">
<div class="event-name">Sundown Exercise</div>
<div class="event-congregation">7:36 <span class="TIME-PERIOD">PM</span></div>
<div class="next-congregation">7:38 PM</div>
</div>
</div><div class="event-tile horizontal-tile tile-past">
<div class="event-time-start">7:46 PM</div>
<div class="event-time-end">9:20 PM</div>
<div class="event-header">
<div class="event-name">Night Exercise</div>
<div class="event-congregation">7:46 <span class="TIME-PERIOD">PM</span></div>
<div class="next-congregation">7:48 PM</div>
</div>
</div><div class="event-tile horizontal-tile tile-current">
<div class="event-time-start">9:20 PM</div>
<div class="event-time-end">11:59 PM</div>
<div class="event-header">
<div class="event-name">Night time Exercise</div>
<div class="event-congregation">9:20 <span class="TIME-PERIOD">PM</span></div>
</div>
</div>Hooked up is a screenshot of my try up to now and displaying the misalignments within the backside container.
