Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Mohammed Lahboub• 570

    @mohammedlahboub

    Posted

    Looks good keep building 👍

    1
  • Mohammed Lahboub• 570

    @mohammedlahboub

    Posted

    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

    @ByteOverload

    Submitted

    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

    @mohammedlahboub

    Posted

    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

    @mohammedlahboub

    Posted

    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

    @mohammedlahboub

    Posted

    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

    @mohammedlahboub

    Posted

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

    0
  • Alephy [ BR ]• 80

    @alephy9

    Submitted

    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

    @mohammedlahboub

    Posted

    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

    @Wandesanguine

    Submitted

    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

    @mohammedlahboub

    Posted

    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-debugg

    Submitted

    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

    @mohammedlahboub

    Posted

    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

    @mohammedlahboub

    Posted

    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