Skip to content
Submitted over 1 year ago

Responsive 3 columns/ Question BTW

Yaseen Omeira•40
@yaseenomeira
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there a more efficient way to lower the button instead of using margin top?

Community feedback

  • Bernard Rodrigues•250
    @bernard-rodriguesPosted over 1 year ago

    Hi, Yaseen! Congratulations by you solution! Your design looks great!

    Answering your question. Yes. There are some different ways to position the button in this specific case.

    One suggestion would be styling your card class to position: relative. By doing this, the div would become a reference point to inner elements with position: absolute.

    Then the next step would be to declare your button position: absolute, and, after that, you'll be able to control its position using the card as reference point, for example, by using the attribute bottom and defining the button distance from the bottom of the div.

    Absolute elements supports top, left and right attributes too. It's important to keep in mind that you can't use two vertical absolute attribute, as top and bottom, simultaneously, as you can't you two horizontal, as left and right

    I hope it can help you! Keep on with the god job!!

    Marked as helpful
    0
  • Finney•3,030
    @Finney06Posted over 1 year ago

    For the accessibility issue use a main tag for the whole content and container tag for the three containers instead of using <div class="container">

    0
    Yaseen Omeira•40
    @yaseenomeiraPosted over 1 year ago

    @Finney06 what is the reason for my main tag, do I treat it like a body?

    0
    Finney•3,030
    @Finney06Posted over 1 year ago

    @yaseenomeira The <main> tag in HTML5 is used to represent the main content of a document, section, or application. It is typically used to wrap the main content of the page, such as articles, sections, or other content that is central to the page's purpose.

    You can treat the <main> tag similarly to the <body> tag, in that it is used to group the main content of the page together. However, unlike the <body> tag, which contains the entire content of the page, the <main> tag should only contain the main content of the page. This makes it easier for search engines and other tools to identify the most important content on your page.

    0
  • Finney•3,030
    @Finney06Posted over 1 year ago

    You didn't give a font-family: 'Lexend Deca', sans-serif; for the .suv button class which you could have just written it in the button element instead since its general for the three buttons. That is a more efficient code practice.

    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