Skip to content
OverviewSolutions
14
Comments
41
Mohammed Lahboub
@mohammedlahboub

All comments

  • Mohammed Lahboub•570
    @mohammedlahboubPosted almost 2 years ago

    Looks good keep building 👍

    1
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    HI if you want to center the card you can use display flex on the .containner

    .container{
   display: flex;
   align-items: center;
    justify-content: center;
    height: 100vh; }

    After this you can adjust the border-radius on each corner more on border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

    Marked as helpful
    0
  • Ahtasham•20
    @ByteOverloadSubmitted over 2 years ago

    Hello mentors. This is my Day 5 of leaning html and CSS and I really enjoyed doing this challenge with some custom features inside. Hope the community will like it ! I guess i didn't put the right font family or it was just my browser . Please suggest any improvements

    PS : I loved the hover effects and transitions :D

    Order Summary Component Card

    2
    Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    HI @ByteOverload congratulation on your solution and keep learning you are doing great , i have a tip for you if you want to center an element inside the body use display flex on the body

    .body{  
width: 100vw;  to make body width equal to screen width
height: 100vh;  to make body height equal to screen height
display: flex;  set display mode for body as flex
align-items: center;  to center items inside the body vertically
justify-content: center;   to center items inside the body horizontally
}

    to use the SVG pattern you can make a background-image for the body

    body{
    background-color: hsl(225, 100%, 94%); **remove it from <main>
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain; }

@media (max-width: 600px)
body {
    background-image: url(./images/pattern-background-mobile.svg);
}

    remove all of the position properties from the div element and it should be center after you apply the above listed rules:

        position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -150px;}

    And if you like to customize solutions check my profile for inspiration https://www.frontendmentor.io/profile/mohammedlahboub

    0
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @julliafren you submited a solution for 3-column preview card component in Product preview card component chanllenge

    and you forgot to add background color to the body hsl(0, 0%, 95%);

    Marked as helpful
    1
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @julliafren you did great for your first solution to show the image you need to change the img element src because there is no images folder

    Marked as helpful
    1
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    To Center a something You can use display: flex on the parent container like this:

    .body{  
width: 100vw;  to make body width equal to screen width
height: 100vh;  to make body height equal to screen height
display: flex;  set display mode for body as flex
align-items: center;  to center items inside the body vertically
justify-content: center;   to center items inside the body horizontally
}

    Hope this helps

    2
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @NicoAguirre1105 your project is working fine Make sure you change the screenshot to show the project on your profile

    0
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @michelgx21 your solution is perfect maybe you could add a tablet view because the cards look too stretched ( My opinion )

    And here is a tool helps with box-shadow https://html-css-js.com/css/generator/box-shadow/

    Happy coding

    Marked as helpful
    0
  • Alephy [ BR ]•80
    @alephy9Submitted over 2 years ago

    I had a lot of difficulty with the svg files, I couldn't leave it the way I wanted with the image taking up 100% of the component's space and I couldn't leave the music icon in the center. I spent hours coding.

    Responsive with Flexbox

    2
    Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @@alephy9 if you want to use the svg as background you can do this :

    body{
    background-color: hsl(225, 100%, 94%); **remove it from <main>
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain; }

@media (max-width: 600px)
body {
    background-image: url(./images/pattern-background-mobile.svg);
}

    hope this will help

    0
  • Yewande Adeyemi•110
    @WandesanguineSubmitted over 2 years ago

    My code is very okay for mobile view cause I coded foe mobile first. I really think there is a problem with my code. I just know something is hindering my media query, It's not even working at all. I hope someone can help me out with this. Happy coding everyone.

    CSS and HTML

    2
    Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hello @Wandesanguine I saw your code and i think the easiest way to add responsivness from mobile to desktop is wrap the .main-image & .text in another <div> and create a Media query to style it like this :

    @media ( min-width:400px ){
.image-text{
display:flex;
flex:direction; **it's the defaul value**
align-items:center;
justify-content: center; } }

    it should look like this https://prnt.sc/KJXfn9rep4Y7

    After this you could tweak the other stuff

    Feel free to contact if u got any problem or tweet it @me

    Marked as helpful
    0
  • GIGACHAD•230
    @Khalid-debuggSubmitted over 2 years ago

    I don't know if I'm doing queries right or not, please somebody give feedback on it. I spent a lot of time doing box shadow on the purple button and it still doesn't look good. I also wonder why measures change when I view the site on my PC locally and when I upload it on a page on Github.

    Work while crying.. no time!!

    2
    Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @Khalid-debugg your solution is allright to make it look the same accross difrent screen sizes u need to remove fixed positioning properties for .containner and diplay flex to the body like this:

       body{height: 100vh;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;}

    AND REMOVE .container { /* width: 87%; */ /* border-radius: 15px; */ /* margin: 100px auto; */ }

    -To make setting up box shadow easier here is tool https://html-css-js.com/css/generator/box-shadow/.

    Hope this help 😊

    Marked as helpful
    1
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @mahadaamir35 since you used display flex on the .container u could use gap:0.8rem; instead of margin-top:0.8rem;
    check this: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

    And to create an equal white space around the items inside .container just use padding (make sure to remove the margin-top from the img)

    Marked as helpful
    0