Skip to content
OverviewSolutions
5
Comments
7
Om Kakatkar
@OmKakatkar

All comments

  • lai•10
    @laipatelSubmitted about 3 years ago

    I have learned through the MDN Web Docs (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images) that you should use CSS for decorative images and HTML for images that have meaning within the webpage. However, positioning the decorative background circles so that it supports all resolutions without using the HTML image element was difficult (and still not correctly implemented). This is what I had the main issue with and spent the majority of the time on. I would like to learn how to position the background circles so that they are pinned to the top left and the bottom right and approach the top center and the bottom center as the screen shrinks for a more responsive design.

    Profile Card Component using HTML+CSS.

    2
    Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Hi,

    • For the background circles, you are going the correct way by applying them as a background image.
    • Instead of going with percentages for the background-position like the below snippet you wrote :
    body {
	background-color: hsl(185, 75%, 39%);
	background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
	background-position: -350px -500px, 700px 350px ;
	background-position: top -150% left -10%, bottom -150% right -5%; 
	background-repeat: no-repeat;
}

    You can try the following :

     body {
  background-image: url(../images/bg-pattern-top.svg),
    url(../images/bg-pattern-bottom.svg);
  background-repeat: no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  bbackground-color: hsl(185, 75%, 39%)
 }

    This will most likely solve your problem. You can also try going over My Solution if you don't understand anything.

    Happy Coding!!✨✨

    1
  • Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Hi, The preview site link seems to be missing.

    0
  • Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Hi, The Live Site Link seems to be broken

    0
  • Nayana Bhat M•90
    @nayanabhatmSubmitted about 3 years ago

    Hi there!,

    1. If I don’t specify the height in px, top: X% with relative position doesn’t work. Is there any way I can specify height in % instead of hardcoding the value?
    2. I have specified overflow: hidden but can still see the scrollbars when I resize the window.

    Profile Card using Flexbox

    3
    Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Hi,

    Solution for Question 1 :

    • Make sure you fix the 2nd problem first.
    • Remove margin and width in the body tag if any
    • Add the following to the div with class name "main"
        max-width: 1000px; 
    width: 40%;  
    margin: 3rem auto;

    Solution for Question 2:

    • The body seems to have overflow: hidden; attached to it. Remove it.
    • Remove the margin: 5% in body as this is causing an overflow. The total width is getting calculated to 110% on x and y axes.
    • Once these 2 properties are removed from the body, the overflow still persists. This is due to the background images (top and bottom svg images) you have added in your card component. Instead of the img tag in html, you can set those images using CSS as follows:
     body {
  background-image: url(../images/bg-pattern-top.svg),
    url(../images/bg-pattern-bottom.svg);
  background-repeat: no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-color: var(--cyan);
 }

    This will mostly solve your overflow issue

    If you still don't understand, try to go through MY SOLUTION

    PS : Just a heads up, use landmark tags instead of div everywhere. A quick start would be to convert the div with class "main" to a main tag instead

    Happy Coding!!✨✨

    Marked as helpful
    1
  • Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Looks great! You can try adding some more padding (padding-bottom) below the cancel order button.

    0
  • Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    For the background, there are 2 components at use i.e. an image and a color We also need to make sure that the image does not repeat itself. You can try the solution in the other reply and it should work

    0
  • Om Kakatkar•90
    @OmKakatkarPosted about 3 years ago

    Hey, it looks good. Just a few observations

    1. The box shadow is on the outer container instead of the card component.
    2. The height and width is set to 100vw and 100vh which is causing an overflow on the x and y directions. You can try changing this to some lower values, this should also make the design mobile friendly

    Good first attempt! Happy Coding.

    Marked as helpful
    1