Issue
I have three sections, two of which may or may not have different size images depending on user input. Within those two sections are text which I want aligned even if the images are not the same height. I have assigned the sections display flex, along with the parent element of the text, and my text to margin-top: auto. To my knowledge this should work. What am I missing to accomplish this? Any guidance would be appreciated.
section.wraps-section {
text-align: center;
padding: $section-padding-y*5 $section-padding-x $section-padding-y*3;
header {
padding-bottom: $base-spacing;
h2 {
color: $white;
mark {
color: $primary-color;
}
}
}
.section-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 100px;
@include lg-up {
flex-direction: row;
}
.block {
&.content {
.block-body {
display: flex;
flex-direction: column;
}
p {
color: $white;
font-family: $tertiary-font-stack;
font-size: 30px;
margin-top: auto;
}
}
&.svg {
width: 100px;
svg {
width: 100%;
}
}
}
}
}
<section class="wraps-section" style="<?= $bg_style ?>">
<header>
<h2><?= $section_title ?></h2>
</header>
<div class="section-body">
<div class="block content">
<div class="block-body">
<img src="<?= $before_image_url ?>">
<p><?= $before_title ?></p>
</div>
</div>
<div class="block svg">
<?php Assets\render_svg('wrap-arrow'); ?>
</div>
<div class="block content">
<div class="block-body">
<img src="<?= $after_image_url ?>">
<p><?= $after_title ?></p>
</div>
</div>
</div>
<div class="section-footer">
<?php if ($cta_text && $cta_url): ?>
<a href="<?= $cta_url ?>" class="button"><?= $cta_text ?></a>
<?php endif; ?>
</div>
</section>
Solution
You're almost there but you have two issues to resolve:
1. align-items: center
You've added align-items: center
to your .section-body
. It means that the children will be center aligned and won't take 100% of .section-body
's height.
2. .block.content
.block.content
doesn't take 100% of the height of it's parent. To solve that, you can simply add the rule display: flex;
Here is an example with a simplified version of your code and with the css compiled:
section.wraps-section {
text-align: center;
}
section.wraps-section .section-body {
display: flex;
gap: 100px;
flex-direction: row;
}
section.wraps-section .section-body .block.content {
display: flex;
}
section.wraps-section .section-body .block.content .block-body {
display: flex;
flex-direction: column;
}
section.wraps-section .section-body .block.content p {
margin-top: auto;
}
<section class="wraps-section">
<div class="section-body">
<div class="block content">
<div class="block-body">
<img src="http://placehold.jp/120x150.png">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
<div class="block content">
<div class="block-body">
<img src="http://placehold.jp/150x150.png">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
</section>
The scss not compiled:
section.wraps-section {
text-align: center;
.section-body {
display: flex;
// align-items: center will center the items, meaning they won't take the full height of their parent
// align-items: center;
gap: 100px;
flex-direction: row;
.block {
&.content {
// By adding display: flex, you make .content the full height of it's parent
display: flex;
.block-body {
display: flex;
flex-direction: column;
}
p {
margin-top: auto;
}
}
}
}
}
Answered By - Amaury Hanser
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.