Skip to content
OverviewSolutions
14
Comments
10
Ryan
@RJC26

All comments

  • Ryan•290
    @RJC26Posted over 2 years ago

    hey looks awesome so far! There are a few ways you can make the anual plan section work, so right now your code is like this:

    <div class="plan">
    <img src="assets/images/icon-music.svg" alt="">
    <div>
        <h3>Annual Plan</h3>
        <p>$59/year</p>
    </div>
    <a href="#">Change</a>
</div>

    so you could wrap your img in a div and your a tag in a div then add flex display to your plan class in css so for example the html would look like:

    <div class="plan">
    <div (This would be a child of the div with the class **plan**)>
        <img src="assets/images/icon-music.svg" alt="">
    </div>
    <div (This would be a child of the div with the class **plan**)>
        <h3>Annual Plan</h3>
        <p>$59/year</p>
    </div>
    <div (This would be a child of the div with the class **plan**)>
        <a href="#">Change</a>
    </div>
</div>

    after you make this change you would want to go into your css and add display: flex; to your .plan class this would look like this:

    .plan{
    display: flex;
}

    So what this does is make every child element of the .plan class fit horizontally across the page rather than fitting below each other or vertically you can then space then items using margins etc...

    For your background image you should try adding background-repeat: no-repeat; this will stop the image replicating itself, also adding background-size: contain; and then adding background-position: bottom; this should move it into place!

    Hope this helps!

    Marked as helpful
    0
  • Kariman Medhat•170
    @KarimanMedhatSubmitted over 2 years ago

    How do the background images look like the original design? I could use the two images but I couldn't position them right. any ideas? also, I wonder if I can center the avatar image using a bitter way than the one I used?

    Profile card challenge

    1
    Ryan•290
    @RJC26Posted over 2 years ago

    Hey man your having issues with the avatar image because you have placed your card background image as an image in html not a backgorund image in css, so if you delete that from html and add it in your css:

    .container{
display: flex;
flex-direction: column;
align-items: center;
background-image: url(** ADD BACKGROUND IN HER ../EXAMPLE/BACKGROUND.SVG**);
background-size: contain;
background-repeat: no-repeat;
}

    This will center the image and add the background image to your card then you need you need to add a margin-top to you image class and adjust it into position, also remove the position: absolute; from your .avatar class!

    As for your body background you should add background-position-x and y for example you will have to play around with the numbers but this will allow you to move them around and into position:

    background-position-x: -350px, 700px;
background-position-y:-500px, 300px ;
background-repeat: no-repeat;

    This will give it a similar look in desktop version but you will need to adjust it in your media query to look as desired for mobile! also try using outline: 6px solid #fff; instead of border for you image it will look better!

    hope this helps!!!

    Marked as helpful
    1
  • JJ•230
    @julienjavaloyesSubmitted over 2 years ago

    Sort of works but need to look at other solution to see how to make it better, with nav list and clean footer positioning...

    Clipboard landing page (html + sass)

    1
    Ryan•290
    @RJC26Posted over 2 years ago

    hey man looks awesome! The footer links would look better if you added text-align: left;!

    0
  • Ryan•290
    @RJC26Posted over 2 years ago

    hey man with the background you need them to surpass the edge of the viewport so you should try giving them a position: fixed; then for the purple one try left: -200px; top: 0; then just style the height to however long you want it, this will push it off the page slighty and it should look better, as for the right grey background peice you would want to swap it so bottom: 0 right: 200px; etc.. hope this helps!

    Marked as helpful
    1
  • Ryan•290
    @RJC26Posted over 2 years ago

    Hey man looks good, to change the color of insights you need to add <span> </span> around the word Insights in HTML then you can style the span tag in CSS to change the color.

    so in HTML it would look like:

    
<p>Get <span>insights</span> to help your business grow.</p>

    hope this helps!

    2
  • Henrique Dummer•350
    @HenriqueDummerSubmitted over 2 years ago

    Hi everyone!

    Here is another chalenge completed, but i could not find a way to apply de border radius, if someone could help me i would be thankfull !

    3 Column Card Component with flex

    1
    Ryan•290
    @RJC26Posted over 2 years ago

    hey man looked it over and you need to add the code border-radius to the card sedan div and apply it to the top left corner and the top right corner and the same for the card luxury and apply it to the bottom left corner and bottom right corner so example:

    .radius-sedan{
border-radius: 15px 15px 0 0;
}


    .radius-luxury{
border-radius: 0 0 15px 15px;
}

    This will work for the mobile version, then you need to change the corners which the radius are applied to for the desktop version, so you just add the same code to the media query and change the corners example:

    .radius-sedan{
border-radius: 15px 0 0 15px;
}

     .radius-luxury{
border-radius: 0 15px 15px 0;
}

dont forget to then add these classes to the divs on the html sheet! 

hope this helps looks great!
    Marked as helpful
    1
  • Brijesh Singh•10
    @brijeshrajputtSubmitted over 2 years ago

    I have build the project and optimized it for desktop view but it is not aquiring same space when viewed in mobile devices.

    1. How to optimize webpage for mobile phone?
    2. How to position html elements (i.e., div) vertically in centre of webpage?

    atom code editor

    1
    Ryan•290
    @RJC26Posted over 2 years ago

    Hey man to optimise for mobile you need to look into media queries! also centering a div can be done using flexbox so you could use:

    display: flex;
justify-content: center;
align-items: center;

    hope this helps and it looks great!

    0
  • Ryan•290
    @RJC26Posted over 2 years ago

    Hey man I think your github page isnt working, you should try removing the first folder so your index.html is visable in you repo! this should fix it I believe!

    0
  • John•20
    @JohnPORSubmitted over 2 years ago

    This is my first project after following some online resources so there's likely quite a few areas for improvement. Happy to recieve feedback on areas for improvement.

    Basic HTML and CSS

    2
    Ryan•290
    @RJC26Posted over 2 years ago

    Hey man, looks great! I noticed you put margin: 0; padding:0; in body and box-sizing: border-box; in html, you could always use:

    *{
box-sizing: border-box;
margin: 0;
padding: 0;
}

    This does the same thing just a bit of tidying! Looks awesome!

    Marked as helpful
    0
  • Ismail•40
    @ismo1184Submitted over 2 years ago

    I had issues choosing the proper width/height. The image size would be cropped out or re-size in weird ways. I think maybe just uploading the image in a div and then finding some other way of overlaying the bg-color (position absolute?) would have been better in this case. Any advice?

    Stats Preview Card Component

    1
    Ryan•290
    @RJC26Posted over 2 years ago

    Hey man looks great, so im pretty new to coding myself but got this advice which helped me with a similar problem i was having. If you create a div and place your img tag inside that div, you can set the height and width of that div however you want and then set the height and width of the img to 100%. This means that you are saying you want the image to always be 100% of the size of the div so it helps for responsive aswell as sizing! Not sure if this helps but I hope I explained it well enough!

    Also if you had put the image in a div you could then set the background color of the div and change the opacity of the image so you get the blend of color!

    0