Mohammed Ahmad Hussain

Latest comments

• 

  ichigoxpumpkin•20

  @ichigoxpumpkinSubmitted almost 2 years ago

  

  responsive landing page using flexbox

  2

  100
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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

  0
• 

  Masood Acheampong•210

  @Masood-zoneSubmitted almost 2 years ago

  

  QR Code Component using CSS flex.

  2

  70
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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.

  0
• 

  Sador•200

  @SadorDevSubmitted almost 2 years ago

  

  Results Summary Component

  #sass/scss

  2

  80
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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

  0
• 

  Hadijatu Mohamadu•10

  @hadijah10Submitted almost 2 years ago

  

  QR-code-component

  2

  70
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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.

  1
• 

  justincred•10

  @justincredSubmitted almost 2 years ago

  

  Qr code website using HTML and css

  1

  50
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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.

  0
• 

  Samara Silva•70

  @samarasilva18Submitted almost 2 years ago

  

  QR Code Component challenge using Flexbox

  1

  30
  

  Mohammed Ahmad Hussain•200

  @mah07308Posted almost 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

  1