Flexbox, media query, ids, classes

Community feedback

• 

  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

  0

  ---

  

  PizzaNCoding88•80

  @PizzaNCoding88Posted about 2 years ago

  Hi @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

  

  Vaibhav Shete•150

  @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 helpful

  0

  

  PizzaNCoding88•80

  @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