Skip to content
Submitted over 4 years ago

Third project using HTML and CSS :- Single price grid component:)

Sonali•90
@Sonali-Behera
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here I am uploading my third project. But here I am facing an issue that I am unable to change the position of "per month" span from bottom. Please kindly help me out and recommend some better coding ways:) N.B : This span ("per month") is present in the 2nd row and 1st column. It is grouped as a class named "rest".

Community feedback

  • Mahesh Yadav•1,220
    @Mahesh-yadavPosted over 4 years ago

    Hi

    <span class="amount">$29</span>
 <span class="rest">per month</span>

    These two element have display: inline by default. So you cann't use margin-top or margin-bottom. Set their display to inline-block using display: inline-block Then to align them vertically you can use vertical-align property on either of these two elements

    Another war is to wrap these two element in a div element. Set following styles on the div element.

    display: flex;
align-item: center
    1
    Sonali•90
    @Sonali-BeheraPosted over 4 years ago

    @Mahesh-yadav Thank you very much sir for your valuable suggestion !!! Definitely gonna apply these:)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord