Design comparison
Solution retrospective
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.
Community feedback
- @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 helpful0@PizzaNCoding88Posted about 2 years agoHi @vaibhavbshete , Thanks a lot for all the suggestions. Since the design didn't require the lighter font weight I have not selected it on the google font page, but thanks to your comment I realise I should have.
It's still all so confusing with width, padding and margins. As I was struggling to keep the cards with the same layout when increasing or decreasing the screen sizes, I could only see fixed width as the only solution to avoid getting a weird design. Could I add even more breakpoints despite the design required only one media query?
Thanks so much again.
0@vaibhavbshetePosted about 2 years ago@PizzaNCoding88 We as developers should consider that the designers cannot possibly give us a separate design for each and every screen size. Whatever they give is more of a reference than a pixel perfect guide. Notice that even when you went for fixed sized containers, the solution differs from the design as seen from the slider above. There are other guidelines that you as a developer need to take care of. A simple example being: Don't make the user scroll horizontally because of overflowing text content. It is a cumbersome experience. As a preparation, we must spend some time studying the designs. We have two references: 1. How it should look on a big horizontal screen. 2. How it should look on a small vertical screen. From that we need to answer questions like:
- What is most important?
- What needs to be emphasised?
- If the screen is even smaller, what can be compromised?
- If someone opens it on a big, vertical screen, how should it look?
- What about small, horizontal screens?
And so on. We need to understand the design at concept level rather than pixel level. If we are able to ask these questions directly to the designers, well and good, but in cases like remote collaboration, or contract based departments, they might not be available. We need to be able to do some of this extrapolation work ourselves. No need to go crazy either, just get a mental picture of what kind of screens it will be opened on, and get an idea. Considering all that, in your solution, if one is viewing on a screen size slightly higher than your break point but still on a mobile (e.g. on my own phone), the content takes a desktop layout and flows out of the screen. It becomes inconvenient to scroll or zoom and view all of it. So instead set the breakpoint (the
min-width
value you enter in the@media
query) that includes slightly bigger screens too. That would still keep the expected layout at a 375px wide screen, and also give a mobile layout on slightly larger (but still mobile) screens. No need to add more breakpoints.Marked as helpful0@PizzaNCoding88Posted about 2 years ago@vaibhavbshete Thanks a lot for your tips and suggestions.
I have based my @media size choice on the width of the mobile version provided in the style guide, but I agree I would have gone for a bigger size for the mobile version since 375px is way too small.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord