Frontend Mentor | RishabhSikka3's profile

Latest comments

P
Nuradeen Mohammed•260
@nursh
Submitted 15 days ago
What specific areas of your project would you like help with?
Any feedback is welcome
FM Tip Calculator
1
P
RishabhSikka3•220
@RishabhSikka3
Posted 15 days ago
Good job. Need to handle the error states on input, blur and focus events better. At times the error state is not showing up.

@Alexander3717

Submitted 27 days ago

What challenges did you encounter, and how did you overcome them?

When styling the tracking cards I ran into a rendering issue (background color bleed in rounded corners) described and solved in this post. I used the linear-gradient method to fix it.

Another challenge was implementing the dashboard grid without changing the desired HTML structure. Here's the deal:

In the desktop design, all the cards — including the "Report for Jeremy Robson" card, are equally wide. To achieve that, it would be best if they followed the same grid.

However, for accessibility and semantics I made the "Report for Jeremy Robson" card be the <header> and placed the tracking cards inside <main>.

<body> <!-- body is the grid -->
  <header></header> <!-- header is the "Report for card" -->

  <main> <!-- tracking cards are inside main -->
    <div class="tracking-card1"></div> 
    ...
    <div class="tracking-card6"></div>
  </main>
</body>

The <header> and the children of <main> aren’t siblings, so I couldn’t easily control them with the same grid. To solve this, I used subgrid on <main>. This allowed <main>'s children (the tracking cards) to follow the column lines of the grid defined on <body>.

Now both <header> and children of <main> are following <body>'s grid structure and I can easily make them equally wide with grid-template-columns: repeat(4, 1fr).

body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // other properties here
}

header {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
}

main {
    display: grid; // the subgrid needs to have display: grid as well

    // you set the subgrid keyword on grid-template-columns, grid-template-rows or both
    // in this case I needed it on grid-template-columns
    grid-template-columns: subgrid;

    grid-column: 2 / -1;
    // this says in which area of the parent grid should the subgrid lay out its children
    // it then lays them out in this area according to the parent's grid lines
}

Responsive time tracking dashboard made with CSS Grid and subgrid

#bem#sass/scss

RishabhSikka3•220

@RishabhSikka3

Posted 21 days ago

Quite complex approach you have taken to solve it. The fetched data is not getting rendered in UI. I encountered the same issue. Try using the relative path in the javascript file. Use path "data.json" instead of "/data.json".

And I haven't worked using subgrids for now but it can get implement without subgrids.

Marked as helpful

Dhia zorai•230
@Dhia-zorai
Submitted 26 days ago
Newsletter sign-up form with success message
1
P
RishabhSikka3•220
@RishabhSikka3
Posted 25 days ago
Design is responsive.
1. Use different image for the mobile size devices. Use picture element instead.
2. Use cdn for importing fonts with display=swap.
Dhia zorai•230
@Dhia-zorai
Submitted 29 days ago
What challenges did you encounter, and how did you overcome them?
The biggest challenge that I have encountered is by far the styling of the share container,its somewhat complicated,and it requires a lot of trial and error to get right, both on mobile and on desktop.
What specific areas of your project would you like help with?
I would like to know how to make the floating share container ( desktop view) floats outside of the main container, right now if i move it to the left the part that's supposed to be outside disappears.
Article preview component
1
P
RishabhSikka3•220
@RishabhSikka3
Posted 28 days ago
Not being able to scroll in the mobile view. Provide the container the min-height of 100vh so that it can be scrolled.
P
Destiny•130
@DetDet91
Submitted about 1 month ago
What challenges did you encounter, and how did you overcome them?
This took me forever to get the hero images and hero text to respond to the mobile and tablet sizing. I had to adjust the padding and rework that section in my HTML to get the pictures and text in the correct position, finally. In hindsight, I should learn how to use Tailwind to make this a more straightforward fix.
What specific areas of your project would you like help with?
For some reason, my hero images on mobile and tablet are not displaying the entire image, unlike the previews. Additionally, do you have any recommendations on where to learn React or Tailwind?
Responsive meet landing page
1
P
RishabhSikka3•220
@RishabhSikka3
Posted about 1 month ago
1. Nice. But would hero images are getting cropped too much even at the full screen size.
2. Would need to adjust the aspect ratio or don't use the aspect ratio.
3. And use the separate image for mobile devices. Use display: none to hide the images on different screen sizes.
neeta Purohit•160
@neetaPurohit
Submitted about 1 month ago
What challenges did you encounter, and how did you overcome them?
I faced issues with the CSS Grid layout not displaying properly on smaller screens. The cards were stretching edge-to-edge without any spacing. I fixed it by adding padding to the container and using media queries to stack cards vertically with proper margins.
What specific areas of your project would you like help with?
Any suggestions to make the layout cleaner using CSS Grid are welcome.
Responsive Testimonial Grid using HTML, CSS Grid, and Media Queries
1
P
RishabhSikka3•220
@RishabhSikka3
Posted about 1 month ago
Responsiveness is really good but it had different designs for different screen sizes. Would need to adjust the font-weights as well for the paragraph in the cards.
Marked as helpful