Skip to content
Submitted over 4 years ago

Fylo landing page with two column layout

Celtic Sheep•100
@CelticSheep
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi all,

I saw on the mobile design that illustrations are located "All your files in one secure location, accessible anywhere" and "Stay productive, wherever you are" texts.

How can I put the illustration above those text like the design? (the illustrations are below the texts on HTML so when I show the grid, it comes the order on HTML...)

Your feedback'd be much appreciated.

Community feedback

  • Julian Hincapie•235
    @julianhv20Posted over 4 years ago

    You did a good job on this project!, I recommend you to use the order property of css grid

    The order property can be used to specify the order in which different items should be placed inside a grid. By default, the items are placed in the order in which they appear in the DOM.

    https://www.sitepoint.com/order-align-items-grid-layout/

    2
    Celtic Sheep•100
    @CelticSheepPosted over 4 years ago

    @julianhv20 Thank you very much for your prompt reply and giving me the answer of this. 🙇‍♂️ I now understand how the orders in grid work and am able to have the challenge same as the mobile design. 👍 (I can sleep well tonight! 🙂)

    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