Advice generator app using Flexbox

Community feedback

• 

  Tushar Sharma (波風ミナト)•100

  @itundefinedPosted almost 2 years ago

  Hey, It's nice I think you may consider updating it a little.

  1.) For the Circule image you don't need to make it absolute since it's a part of the layout, put all the content in the main section. Just like that

  In this main section, you don't need to do anything just do this -

  give padding-left, right and top only leave the bottom; and make it flex and give it some gap

  .main{ padding: top(px) right 0(For bottom) left; display: flex; flex-direction: column; gap: 10px; (or any that suits) }

  for the mobiles - .main{ max-width: 90%; }

  for the tables and bigger screens

  .main{ max-width: 50%; }

  <section" role="main" aria-roledescription="main section">

  <p class="">advice #<span></span></p>
  
  <img src="./images/pattern-divider-desktop.svg" alt="divider">
  

  Over here you can give the padding to the .diceWrapper and then make it's radius 190px to make it a circle and then use transform: translateY(50%) or translateY(-50%); it will automatically be in the bottom of the section at it's middle point as it was in the design.

  <div class="diceWrapper">
    <img class="diceImage animate-spin" src="./images/icon-dice.svg" alt="dice button">
  </div>
  

  </section>

  Marked as helpful

  1

  ---

  

  Leonardo Henrique•130

  @henrikkudesuPosted almost 2 years ago

  @itundefined Thank you for your reply! Im gonna take a look at it after i learn more about responsive layouts, which is where im failing a lot.

  1