flexbox

Community feedback

• 

  John Rey Faciolan•220

  @juani2Posted over 3 years ago

  Hello dod123-stack,

  Keep on!

  my approach in pushing out the computer image was to place it in a container together with the text on the right, then, I placed a negative margin on the container, not on the image itself.

  Heres a snippet from my solution:

  <div class="page-section-1__main">
                  <div class="img-flex-container">
                      <img class="img--fluid" width="752" height="572" src="/images/image-computer.png" alt="Computer Screen" />
                  </div>
                  <div class="feature-list-1">
                      <div class="feature-1">
                          <h3>Quick Search</h3>
                          <p class="text--caption">Easily search your snippets by content, category, web address, application, and more.</p>
                      </div>
                      <div class="feature-1">
                          <h3>iCloud Sync</h3>
                          <p class="text--caption">Instantly saves and syncs snippets across all your devices.</p>
                      </div>
                      <div class="feature-1">
                          <h3>Complete History</h3>
                          <p class="text--caption">Retrieve any snippets from the first moment you started using the app.</p>
                      </div>
                  </div>
              </div>
  

  and for my styling:

  .page-section-1__main {
          width: 100%;
          margin: unset;
          max-width: 1212px;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
          margin-left: -32px;
      }
  

  Also, you can further improve the reading experience of your landing page by placing maximum widths to your paragraphs.

  You can also check my Solution on the link below. I will greatly appreciate your feedback from my solution :)

  https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

  0

  ---

  

  Doaa•115

  @dod123-stackPosted over 3 years ago

  @juani2 oh Thanks..it helped a lot, I will edit my code as soon as I can.

  0

  

  John Rey Faciolan•220

  @juani2Posted over 3 years ago

  @dod123-stack , wow! Thanks

  0