Skip to content
OverviewSolutions
16
Comments
10
Stijn
@stijnmeershoek

All comments

  • Stijn•460
    @stijnmeershoekPosted about 2 years ago

    if you want a button width a dynamic width that is a perfect circle you will probably want to use this:

    button {
  width: ?; // your dynamic width probably % or vw
  aspect-ratio: 1 / 1; // auto adjusts the height to the same as the width to keep it as a square
  border-radius: 50%; // rounds it fully to a circle;
}
    Marked as helpful
    0
  • Forrest Olson•10
    @f0lsonSubmitted over 2 years ago

    The only question I have is:

    • Should I have used a different HTML element for the card? I used an <article> tag as I've seen others use that when building out cards.

    Order Summary Card

    1
    Stijn•460
    @stijnmeershoekPosted over 2 years ago

    An ‘<article>’ is perfectly fine, according to the official doc an article should be used if it is component that is independent, self-contained content.

    An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

    So for this an article tag would be the right one.

    Marked as helpful
    1
  • James Uyi•30
    @kingjamesxSubmitted over 2 years ago

    I have a question on the Javascript part , how do i store the highlighted cliked rating value to display on the next page and not the last clicked value ( the 1,2,3,4,5) from the rating...finding this challenging

    Responsive Interactive-rating-component

    1
    Stijn•460
    @stijnmeershoekPosted over 2 years ago

    Instead of using normal buttons you could use radio buttons inside a form. This would save you from having to use ANY JavaScript to store the value of it. And when you submit the form it will pass the current value.

    Have a look at my solution if you need any help on how to do this. Or just reply to this comment

    My solution: https://www.frontendmentor.io/solutions/rating-component-with-radio-buttons-and-a-minimal-amount-of-javascript-ry3vuf9f9

    Marked as helpful
    0
  • Sprint DV•50
    @SprintStarDVSubmitted over 2 years ago

    Here is my 5th challenge, I do not have any particular question but if you see anything that should be improved please let me know, any opportunity to learn is welcomed ^^

    (note : i noted that for some reason the background urls are not showing on the website via the Github page even tho they show up when i open the index in my browser directly, i do not know why)

    Social proof section challenge

    1
    Stijn•460
    @stijnmeershoekPosted over 2 years ago

    because you have your .css file inside a folder called css and your images inside a different folder at the root level you need to use ../images instead of using /images in your css file. that will fix it

    0
  • Mehakdeep Kaur•80
    @Mehak-deep-kaurSubmitted over 2 years ago

    Hi! How can we align the grid in center without using margin property just like we can do in flexbox I tried to do justify-content:center and align-items:center... It doesn't work.. Please some feedback on this and also provide feedback for more improvement..

    Single Price Grid Component

    1
    Stijn•460
    @stijnmeershoekPosted over 2 years ago

    The equivalent of justify-content: center; and align-items: center in CSS Grid is place-items: center; this centers vertically and horizontally

    0
  • Rina•100
    @dodrinSubmitted over 2 years ago

    Hi, this is my 3rd project on frontend mentor. I used CSS grid for the responsive design. Somehow I could not make the container rounded.

    I appreciate your feedback! Happy coding🙌

    3 column preview card component using CSS grid

    2
    Stijn•460
    @stijnmeershoekPosted over 2 years ago

    To make the container rounded you would need to add a border radius, and then also add overflow: hidden to clip the content with the border radius. And to make overflow hidden work you need to specify a width and height. Example below

    .container {
  width: your width;
  height: your height;
  overflow: hidden;
  border-radius: ?px:
    0
  • Stijn•460
    @stijnmeershoekPosted over 2 years ago

    what you did in your sulution so position absolute on your .container with top 50% left 50% is perfectly fine, but yes there are other options like using Flexbox on the .app like below:

    .app {
  display: flex;
  justify-content: center;
  align-items: center;
}

    or with CSS Grid

    .app {
  display: grid;
  place-items: center;
}
    Marked as helpful
    0
  • Stijn•460
    @stijnmeershoekPosted over 2 years ago

    The proper way to position the dice button would be to have a position: relative on the container of the button, then add a positon: absolute on the button. and add a bottom of half the height of the button. like below. if you need more info on why it works this way i'll be happy to help.

    .container {
  position: relative;
}

button {
  position: absolute;
  bottom: -30px;
  height: 60px;
}
    1
  • Stijn•460
    @stijnmeershoekPosted over 2 years ago

    it's a very small thing, but I always consider it best practice to use .textContent and not .innerHTML for adding text to an element. for this project it's not really that important but innerHTML is a security problem and could be used by hackers if used wrongly.

    Marked as helpful
    1
  • Stijn•460
    @stijnmeershoekPosted over 2 years ago

    the problem you're having is because if you apply a percentage % to border radius it will want to make the button look like a circle, to get the nice pill shape you should use other units. It doesn't matter which units as long as it's not a percentage. i suggest using 100vw so that it will always be a pill

    Marked as helpful
    0