0

Im working on a simple project from FrontLoops. Its a basic services card. The project calls for the cards to be aligned by the titles of the section. Right now, my text description is pushing up two of my titles so that all three are not aligned.

Ive been trying to use flexbox to align them overall, but I am unable to so far figure out what settings or combination of settings can get me aligned by the titles across all 3.

Is it possible for anyone to point me in the right direction? Ive placed the red backgrounds just for ease of viewing.

tldr, I would like all 3 columns aligned by the titles. Is this possible with flexbox? If not, could someone point me to a resource that could help me?

/** Root Variables
 ---------------------------------------------------------*/
:root {
    --blue: rgb(85,114,214); /* title text and price */
    --grey: rgb(167,167,167); /* primary text */
    --light-grey: rgb(243,243,243); /* hover background */
    --white: rgb(255,255,255);
    --blue-grey: rgb(133,165,212); /* background */
}

/** Global Reset
 ---------------------------------------------------------*/
 * {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

body {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    background-color: var(--blue-grey);
    color: var(--white);
    line-height: 1.5;
    font-size: 1.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

/** Primary Price Compare
 ---------------------------------------------------------*/
.wrapper {
    height: 40rem;
    background-color: var(--white);
    border-radius: .5rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

 .card {
    background-color: var(--white);
    color: var(--blue);
    height: 35rem;
    width: 35rem;
    border-radius: .5rem;


    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


.card:hover {
    background-color: var(--light-grey);
}
.card_icon {
    padding-bottom: 1rem;
    background-color: red;
}

.card_icon-svg {
    height: 10rem;
    width: 7rem;
}

.card_title {
    font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: 4;
    font-weight: 600;

    background-color: red;

}

.card_description {
    padding: 0rem 5rem;
    text-align: center;
    color: var(--grey);
}

.card_fee-period {
    font-size: 2.25rem;
    font-weight: 500;
}

.card_fee-price {
    font-size: 4rem;
    font-weight: 700;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Front Loops 1-1</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    
    <div class="wrapper">
        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/device.svg" alt="Mobile">
            </div>
            <div class="card_title">Mobile</div>
            <div class="card_description">
                Get notifications about new releases in our mobile app.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$10</span> /month</div>
            </div>
        </div>

        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/laptop.svg" alt="Desktop">
            </div>
            <div class="card_title">Desktop</div>
            <div class="card_description">
                Enjoy new episodes on your laptop in browser with our web service, which supports all the plateforms.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$15</span> /month</div>
            </div>
        </div>

        <div class="card">
            <div class="card_icon">
                <img class="card_icon-svg" src="img/monitor.svg" alt="TV">
            </div>
            <div class="card_title">TV</div>
            <div class="card_description">
                Watch your favorite series at home on large screen with our TV application.
            </div>
            <div class="card_fee">
                <div class="card_fee-period"><span class="card_fee-price">$20</span> /month</div>
            </div>
        </div>

    </div>


    <!-- Custom JS -->
    <script src="js/scripts.js"></script>
</body>
</html>
Craig Menne
  • 75
  • 10
  • 1
    There is no CSS layout method that allows alignment of elements that **do not share a parent**. – Paulie_D Sep 04 '18 at 14:40
  • So would I just simple align those by adding arbitrary padding to the icon elements then to push down the titles till they are aligned? – Craig Menne Sep 04 '18 at 14:42
  • Can I just clarify - you want your titles in each card to be aligned? I might be wrong lol. – Liam Geary Sep 04 '18 at 14:49
  • Liam Geary - yes that is precisely what I would like to do. The above link might have an answer, looking into it now. Would still love to hear your suggestion if you have any though. :) – Craig Menne Sep 04 '18 at 14:51
  • As Paulie said, you won't be able to do that with the existing code (using CSS alone), as for the card items to align horizontally with each other, they need to _**see**_ each other (being siblings), which I show how-to in the above link. – Asons Sep 04 '18 at 14:54
  • @LGSon - thanks for the link, been going over it for the past hour or two trying to see what works best. I am opting for the Vanilla JS version as I think the amount of rework for the CSS version is not worth it in the end. Im curious, for the JS version, if I am understanding this correctly, the correct application to my project would be to apply the standard height to my Icon class, which would then force all my titles to be same height down. (I believe). Would this be a correct assessment? Now just need to figure out what all the JS means and does so I can apply it to my file. – Craig Menne Sep 04 '18 at 16:23
  • @CraigMenne That is correct. What it does, simplified, is to loop through elements with a given class, check which one is highest and then dynamically create a CSS rule with the very same class, and set its height property to the found height value. The "resize" listener will then, if the window size change, recalculate and set a new value. – Asons Sep 04 '18 at 17:03

0 Answers0