Skip to content
OverviewSolutions
13
Comments
38

Mahmoud-AbdelKarim

@Mahmoud-Abdelkarim777600 points

I am Mahmoud, front end developer, graduated from eelu university in Egypt

Latest solutions

View more solutions

Latest comments

  • Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • Hi there, I saw your coding it is good.
    • If you want to place the component in the middle of the screen, you should add this value inside the body element {min-height: 100vh;} and remove the 5% margin.
    Marked as helpful
  • Dan1946•10
    @Dan1946
    What are you most proud of, and what would you do differently next time?

    I WAS ABLE TO USE CSS FLEX-BOX FOR THE FIRST TIME, AND THE OUTCOME WAS NICE

    What challenges did you encounter, and how did you overcome them?

    I ENCOUNTERED CHALLANGES IN CENTERING ALL THE INNER ELEMENTS IN THE QR DIV, AND ALSO SPACING OF EACH ELEMENT INSIDE OF THE QR DIV

    What specific areas of your project would you like help with?

    I WOULD LOVE A GENERAL REVIEW OF THE PROJECT, ESPECIALLY IN AREAS IN I COULD HAVE DONE BETTER, FOR EXAMPLE IN TURNED THE BODY ELMENT INTO A FLEX-BOX AND I AM NOT SURE THAT WAS NECESSARY IN ACHIEVEING THE DESIRED OUTCOME.

    QR-code design using CSS FLEX-BOX

    2
    Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • I saw your coding, it is good but it needs improvement.
    • Add these values to body min-height: 100vh; gap: 2rem;
    • remove from .qr-container
      /* margin: 90px 100px 30px 100px; / / margin-top: 90px; / / margin-bottom: 30px;
    • If you make these improvements you will see amazing results.
    Marked as helpful
  • Obas27•50
    @Obas27
    What are you most proud of, and what would you do differently next time?

    Using media queries for the desktop views

    Responsive design

    #cube-css
    1
    Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • Hello brother, I saw your coding, it is good but needs modifications.
    • Delete this code @media (min-width: 600px) { .bg-image img { height: 400px; width: 110%; } } Don't use 110% in width.
    • Also delete this product { margin: 20px; } This is due to 110% width
    • use in desktop this img <div class="bg-image"> <img src="/image-product-desktop.jpg" alt=""> </div>,

    and in mobile <img src="/image-product-mobile.jpg" alt="">

    • If you make these improvements, you will see amazing results.
    Marked as helpful
  • Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • I loved your code.
    • wishing the best for you.
  • Nafis Sazzad Niloy•160
    @methane-js
    What are you most proud of, and what would you do differently next time?

    I am proud because I have successfully completed a project of a renowned website. I want to learn further about frontend development from this website.

    What challenges did you encounter, and how did you overcome them?

    I am basically very weak in responsive web designs. So I encountered a challenge for making this project responsive. But I overcame them with very simple codes.

    What specific areas of your project would you like help with?

    I would like to know about placing an object to the center of a website. I think there is a better way to place the QR code in the center.

    If you know, please tell me.

    A Simple QR Code Project using only HTML and CSS

    2
    Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • i saw your coding it needs some improve.
    • remove margin: auto; margin-top: 200px; from main
    • add to the body this { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
    Marked as helpful
  • Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • It is better to write the values ​​in the body instead of html.
    • keep going
View more comments