Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
8

Mohammed Ahmad Hussain

@mah07308Hyderabad, India200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Flexbox, Grid, Javascript & React.js

Latest solutions

  • Responsive Blog Preview Card using HTML and CSS

    #accessibility#bem#semantic-ui

    Mohammed Ahmad Hussain•200
    Submitted over 1 year ago

    0 comments
  • Responsive Social Links Profile Card (HTML, CSS)

    #bem#semantic-ui

    Mohammed Ahmad Hussain•200
    Submitted over 1 year ago

    0 comments
  • Responsive Four Card Feature Section

    #accessibility#bem

    Mohammed Ahmad Hussain•200
    Submitted almost 2 years ago

    0 comments
  • Interactive Rating Component

    #accessibility#semantic-ui

    Mohammed Ahmad Hussain•200
    Submitted about 2 years ago

    1 comment
  • Responsive 3 Column Preview Card Component

    #accessibility#semantic-ui

    Mohammed Ahmad Hussain•200
    Submitted about 2 years ago

    0 comments
  • Responsive Stats Preview Card Component

    #accessibility#semantic-ui

    Mohammed Ahmad Hussain•200
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • ichigoxpumpkin•20
    @ichigoxpumpkin
    Submitted about 2 years ago

    responsive landing page using flexbox

    2
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    You need flexbox on the body to center div both horizontally and vertically within it.

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    }
    
    Marked as helpful
  • Masood Acheampong•210
    @Masood-zone
    Submitted about 2 years ago

    QR Code Component using CSS flex.

    2
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    Media queries are basically used when the designs are different for different devices(mobiles, tablets, desktop etc).

    Example: If we're making a website for a mobile and a desktop. We can first write the code for the mobile device and then make the appropriate layout changes to switch to the desktop design at a specific width. This width for desktops/laptops is usually 1028px.

    So in our code to seperate the mobile design and the desktop design, We'll use a media query.

    @media(min-width: 1028px) {
    /* changes for desktop here */
    }
    

    Whatever changes are needed for our desktop design will be written inside the curly braces of the media query and will be implemented whenever the browser width is more than 1028px.

    You can go through this responsive web design RWD tutorial to learn more.

    I hope this helps.

  • Sador•200
    @SadorDev
    Submitted about 2 years ago

    Results Summary Component

    #sass/scss
    2
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    Hey,

    Check this tutorial on w3schools to learn how to use box-shadow.

    https://www.w3schools.com/css/css3_shadows_box.asp

  • Hadijatu Mohamadu•40
    @hadijah10
    Submitted about 2 years ago

    QR-code-component

    2
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    Hey,

    Well done on completing this challenge. It looks great!

    I have a few suggestions:

    You don't need to set the min-height for all the different devices. You can set the max-width and control the height with margin and padding.

    Also, its better to follow the sequence of your html when writing your css. This organises your code and makes it easier to read especially in bigger projects.

    I hope this helps.

  • justincred•10
    @justincred
    Submitted about 2 years ago

    Qr code website using HTML and css

    1
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    Hey,

    Great job on completing this challenge.

    You can use a min-height: 100vh; and give minimal margin on your container class to place the card in the center.

    The current designs margin is very big for smaller screens and requires some scrolling to be able to view the card.

  • Samara Silva•70
    @samarasilva18
    Submitted about 2 years ago

    QR Code Component challenge using Flexbox

    1
    Mohammed Ahmad Hussain•200
    @mah07308
    Posted about 2 years ago

    Hello,

    Great job completing your first challenge. It looks great on the desktop, but not so good on the mobile because you used margin: 10rem auto; on your main .container.

    I have a few suggestions to fix that :

    • Add to your main tag min-height: 100vh; This will center your card without having to add margins.

    • Remove from your main .container : min-height: 45vh; margin: 10rem auto; padding-top: 0px;

    • Add to your main .container : margin: 1rem;

    This will make the design look good both on small screens and large screens.

    Hope this helps.

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub