Frontend Mentor | Vaibhav Shete's profile

All comments

Josue Sanchez Nima•140

@josueSN1402Submitted about 2 years ago

I would appreciate if someone could tell me how I could improve some of these points:

The use of React context
The array with the notifications
The elapsed time

I plan to make some more changes these days, like using map, to place the notifications.

But it would be nice to have some suggestions 😄.

Notifications page witch React

Vaibhav Shete•150

@vaibhavbshetePosted about 2 years ago

I liked your idea of letting only the notifications scroll when the height is low. Adopting this in my solution too!

Please do check the placement of the red dot. In the designs it appears after the end of the sentence. But in your solution, in the first notification, it appears at the end of the line, even if the sentence continues on the next line.

Also the colours don't quite match up - in my solution as well as yours. We might need to play around a bit. Not altering the given colour values in the style guide, but trying all alternate values till it matches.

PizzaNCoding88•80

@PizzaNCoding88Submitted about 2 years ago

In desktop mode, if I use the same font for both prices, the price with the line running through it won't take a lighter font weight and appear bold, even setting font weight to 100. Any help with that would be very appreciated as I have tried so many different approaches. I'm also open to suggestions on how to improve the design. Thanks.

Flexbox, media query, ids, classes

Vaibhav Shete•150

@vaibhavbshetePosted about 2 years ago

This is a very nice attempt!

I believe the font needs to change for the line-through text, in all aspects: font-size, colour, family and weight - according to the design. Still, if you want to use the same font-family, make sure you select the required weights on the google fonts page. The link should look like this:

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],100;9..144,700&display=swap" rel="stylesheet">

Notice the 100 part. In your code only the 700 part is seen. Google is not serving the lighter font to your page because your page is not specifically requesting it. While we are on this topic, you can add both the google fonts in the same link tag. On google fonts, add weights of both the fonts one by one and then the generated link will include all the selected fonts.

Other suggestions:

improve the break-point. Open it in a desktop browser and use the responsive design mode or manually resize the window. Add a break point around where the content starts overflowing.
Even on mobile version, don't assume fixed width. Set max-width:100% on the card so that it never gets bigger than the screen. Make content flow accordingly. Assume that the two designs are samples, and not just two fixed screen sizes.
Try thinking of margins and paddings in these terms: Does the wrapper limit the boundaries of the content? Then it should be padding on the wrapper. Does the content itself want to distance itself from the edges/ other content? Then it should be margin on the content. e.g. The right panel should offer a padding to its content on left and right. Then the content can occupy the available width using width: 100% and still look as expected. Even the button needs to be full width inside that container - as per the design. Then the extra work of adding negative margins might not be required.
Remember: You often do not need to stray away from the given colours and font-family. The designers usually have considered all the small and big items and included all the needed colours in the style guide. You need to figure out which is which.

Marked as helpful

Ronald Sayre•260

@RJ3605Submitted about 2 years ago

I found getting the alignments and left/right spacing the hardest.

I am mostly unsure of the flexbox items, though I got a good amount of practice in while making this document.

Additional divs have been recommended already. Are there any other tips for manipulating the positions of the elements?

Product Preview Card Using Flexbox and @media

Vaibhav Shete•150

@vaibhavbshetePosted about 2 years ago

The solution closely matches the design, congratulations.

It seems like you have used both @media only screen and (max-width:375px) and @media screen and (min-width:376px). The styles in these blocks become exclusive to those conditions. This might not be needed. The style inside the media queried block usually overwrites the code outside it, if it applies to the same content. The usual advice is this: Design for mobile first, then use media queried blocks to overwrite specific parts of the style to suit wider screens. In some older browsers, media queries might not even be supported. The default style outside any media queries should make the page look good enough. Hence thinking of mobile first helps.
Check the break point. It needs not match the design file dimensions so closely. Try resizing your browser on desktop while the page is open. Add a break point around where the content starts going out of the window.
The image looks distorted (stretched) on desktop. You need to look at the width and height properties on the image. Try either setting width:auto or adding object-fit: cover.
Have you tried the vertical align property? (Suggesting this only because you have asked other ways of manipulating positions.) e.g., In case of the prices, the result you have achieved using flex could also be achieved using vertical-align: middle like so:

.prices {
	/* display: flex; */
	margin-bottom: 20px;
	margin-top: 20px;
}
.price {
	display: inline-block;
	vertical-align: middle;
	/* padding-right: 20px */
}
.original_price {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
}

There is no need to manually add spaces in the title 'perfume', use the letter-spacing property instead.
Look at how you can host images on github itself (since you are publishing on github pages) - it is as simple as including the image files in your repository and linking with relative addresses. The folder structure in the starter files is often useful and could be kept.
Also, check if there was a cart icon file given in the starter files itself. Check to see if it needs to be coloured like the text and how you can colour it using css if needed.
If you have fixed the html and accessibility issues, do re-evaluate the score by clicking on 'Generate New Report' on the report page.

Marked as helpful