Skip to content
OverviewSolutions
13
Comments
10
President Tree
@PresidentTree

All comments

  • tarik310•230
    @tarik310Submitted about 3 years ago

    please give me feedback on the responsivity.♥

    HTML&CSS

    3
    President Tree•360
    @PresidentTreePosted about 3 years ago

    For smaller screens, I insert @media whenever the width of the container gets too big. I also prefer to max-width for small screens and min-width big screens relative to my own screen size, but that's just me. For example, the inspection tool shows that your card is around 1000 pixels wide, so you would make one as @media (max-width: 1000px) and adjust the card accordingly. I also tend to change any width to viewport so it fits all phone screens.

    Marked as helpful
    0
  • Reydel Ocon•385
    @reydelshitSubmitted about 3 years ago

    The background isn't accurate because the provided SVG isn't accurate to mine. I don't know why then the sizes requirement doesn't suit the layout so I change it a little bit

    why the SVG doesn't work on me? please help

    ORDER SUMMARRY USING HTML AND CSS

    1
    President Tree•360
    @PresidentTreePosted about 3 years ago

    Good job on your submission! Add background-size: contain; to your body tag. It makes sure the background image is visible on the screen.

    Marked as helpful
    1
  • President Tree•360
    @PresidentTreePosted about 3 years ago

    Are you talking about the responsiveness of the background or the profile card?

    0
  • tarik310•230
    @tarik310Submitted about 3 years ago

    please give me feedback on the responsivity.♥

    HTML&CSS

    3
    President Tree•360
    @PresidentTreePosted about 3 years ago

    Do you mean the best way to use @media?

    0
  • President Tree•360
    @PresidentTreePosted about 3 years ago

    Good job on your submission! Here is some feedback...

    HTML

    • Your links in your headings are usually on one line (with the exception of overflow) to save space.
    • The spaces at the end of tags are not needed.
    • The span on line 40 does not need to be within the h5 tag.
    • The numbers should have some tag around them like p.

    CSS

    • Change the position of the background images to background-position: right 50vw bottom 40vh, left 50vw top 40vh;.
    • The corners of the profile card image are poking out. Either change the background-radius of the image or add an overflow: hidden;.
    • Did you mean to leave out screen responsiveness? I don't see any @media.
    Marked as helpful
    0
  • President Tree•360
    @PresidentTreePosted about 3 years ago

    Are you asking about adding the images to the background or positioning them?

    0
  • Samia Mahwash•170
    @Mahwash-AlySubmitted about 3 years ago

    I would really like your feedback about positioning of the container on background image. I had to add padding in order to make it appear at the centre of the image. I went through some other solutions and found them using transform property with translate as (-50%, -50%). I have no idea how it centres an element. Also, I am struggling to make it screen responsive.

    Replication of Order Summary Challenge using HTML and CSS.

    5
    President Tree•360
    @PresidentTreePosted about 3 years ago

    Good job on your first Frontend Mentor submission! Here is some feedback...

    • Concerning the positioning, there are a few ways to do it. You can format it like Reydel Ocon suggests using display: grid;, you can do a similar method using display: flex;, justify-content: center;, and align-items: center; which is what I do, or you can make the whole thing position: absolute; and use the transform: translate(-50%, -50%); method that you found. The reason for the transformation is because you are positioning the element relative to the top-left corner of it, so the -50% (or 50% if you use right and bottom instead of left and top) adjusts it to the actual center.
    • I would avoid using sizing in pixels since they aren't as responsive. Use rem instead. There are online converters you can use, such as this one.
    • While color names are easier, colors could be interpreted differently depending on the device. I would recommend using the colors in HSL format like the challenge gives you or RGB. The same goes for the hexadecimal colors.
    • You box-shadow around the payment button should only be on the bottom side. This can be done by changing the 30px to a lower number or increasing 2px.

    As for screen responsiveness, what of it are you struggling with? Do you not know how to do it? The best way to do it? I would be happy to help you if you reply.

    Marked as helpful
    0
  • Ildikó Balogh•80
    @liana5555Submitted about 3 years ago

    This was my first time to create one of Frontend Mentor projects so I would like to get some feedback if it is possible. Is my code weird in any way? I mean what I want to know if it is decent enough or not.

    HTML, SCSS

    1
    President Tree•360
    @PresidentTreePosted about 3 years ago

    For your first project on Frontend Mentor, you did really well! While I am not familiar with SCSS, there are some things I would like to point out...

    HTML

    • You have an external stylesheet, but you still included the styling for the attribution class in the head of the HTML file. Consider moving that to the stylesheet or remove it if it is not used.
    • Is the header supposed to be blank?
    • This is just me, but the slash before the img src works just as well without the slash in front of it.
    • "$59.99/year" on line 37 and the text in the attribution class do not have any tags around them like p, for example.
    • There is a lot of space between main and the attribution class.

    CSS

    • Setting the background-size to cover does not put the background-image in the right position. Consider changing it to contain.
    • You can put more than one style in @media. Just move all of your styles with the same conditions under one. @media is usually placed at the bottom of the stylesheet, too.
    • Same with the HTML images, the img src works just as well without the slash in front of it.

    You can look at my code for reference, too: https://github.com/PresidentTree/Order-Summary-Card

    Marked as helpful
    2
  • Ivelin Mitev•140
    @ivelinsmSubmitted about 3 years ago

    I should really dive deeper in background positioning. I spent maybe an hour only on the positioning and it is still not right.

    However, I will check some solutions here.

    Responsive page with Pure HTML and CSS

    1
    President Tree•360
    @PresidentTreePosted about 3 years ago

    No worries! I had a hard time with the background position, too, but I have figured out a solution from looking at others. However, before I explain it, I would like to point out that the background images should be under the body tag rather than the main tag and you can have multiple background pictures on a single tag. You can also use one tag to position a background like you did for the first one instead of separating x and y as you did for the second one. I would remove anything concern the background images from main and put this under body:

    background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
background-position: right 50vw bottom 40vh, left 50vw top 40vh;
background-repeat: no-repeat;

    or, to condense it even more, use:

    background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, url("./images/bg-pattern-bottom.svg") left 50vw top 40vh no-repeat;
    Marked as helpful
    1
  • President Tree•360
    @PresidentTreePosted about 3 years ago

    HTML

    • Just as a note, you @import-ed your google font instead of linking it on your HTML file. I don't know if one is better than the other, but linking the google font is much more common. To see how to do it, the google font usually has a copy-and-paste function on the website.
    • The challenge came with an image of the "Splitter" logo already split, so you did not need to make a header for it. To use the image with the img tag, upload the image to GitHub and then open the image in a new tab to get the link.
    • Instead of making divs with classes for the percent tip, you could have just used the button tag.

    CSS

    • The challenge came with all the colors that you would need along with a visual reference for what the tip calculator should look like. Of course, it is up to you to decide what you want to do with it, but you obviously used some colors in the wrong places if your goal was to copy it. For example, the background color of the site should be #C5E4E7 instead of #9FE8DF. If you do not like coloring in HSL, there are places on the internet that allow you to input a color in any format and have it represent it in other formats, such as W3School's Color Picker. There's also the option to pull colors straight from an image using sites like Image Color Picker
    • For input and buttons, font does not translate as well as regular elements. As such, the easiest way to fix this is to include font-family: inherit which would allow the fonts to always match whatever the parent element is. It is also helpful to include outline: none to these elements since the outline is square by default and the elements are not square.
    Marked as helpful
    0