Skip to content
OverviewSolutions
11
Comments
11
Kate Dames
@funficient

All comments

  • Kate Dames•250
    @funficientPosted 11 months ago

    Hey, nice work! Your solution looks great!

    Responsive design essentially thinks about how the artifact will look like on different size devices. On a mobile screen your design will work very well, but if it is rendered on a large desktop screen the QR Code might be a bit large as you've set it to always be 75vh regardless of the screen size.

    #main #qr-box{
    height: 75vh;
    width: 50vh;
    background-color: hsl(0, 0%, 100%);
    border: none;
    border-radius: 10px;
    padding: 1%;
}

    To make it more responsive you can either make the QR code size fixed by using em, rem, of px. Alternatively you can add media queries that changes the layout when it reaches the criteria you specify, like the screen size.

    For example, you might want to resize the qr-box when it is the desktop width is 1200px or larger.

     @media (min-width: 1200px) {
       #main #qr-box{
    height: 50em;
    width: 30em;
    padding: 2em;
}

    It will read the CSS from top to bottom, thus, the main code will apply, until it hits 1200px, and then it will resize the qr-box component to a height of 50em, a width of 30em, and padding will change from 1% to 2em. (These measures are not exact, I'm just trying to explain how it works).

    Hope that helps! Enjoy your next challange.

    0
  • Ayyappa Akkala•60
    @AyyappanakkalaSubmitted about 1 year ago

    All Feedbacks are welcome!! While building the project, I'm facing issues with media queries because I am a beginner. Could you please provide some suggestions that will help me to do future challenges

    QR Code Component

    1
    Kate Dames•250
    @funficientPosted about 1 year ago

    Hey, congratulations on submitting your first challenge! Well done!

    Media queries are used to specify any changes in the layout between different media sizes to make it more responsive. For this challenge there is no difference between a mobile and desktop layout (looking at the design files), thus you don't need any media queries (even though they specify mobile and desktop sizes in the style guide).

    If, however, the layout changed, you would want to use the media query to specify what is different between one layout and another. For example, let's say the font size changes to fit better on a mobile screen, then you might have main css like:

    h1 {
  font-size: 3em;
}

    And when the same code is displayed on a mobile device (size obtained from the stylesheet) it will look like this:

    @media (max-width: 375px) {
   h1 {
     font-size: 2em;
   }
}

    So, for a device with a screen size between 0 and 375px the header 1 text will be 2em in size, and as soon as it gets bigger than that, the code above it will be used, in this case 3em for header 1 text.

    Here is a better explanation with more examples: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Hope that helps! Good luck with your next challenge! Kate

    Marked as helpful
    1
  • Nikhil R•260
    @nikhil-131Submitted about 1 year ago

    Hello! I have tried to design the product preview card. I have a small doubt. Do I need to make different solutions for desktop and mobile, or both in the same file? If in the same file, I'm just getting started, so I don't know how to make it in the same file, and some helpful tips or resources will be really helpful. Feedbacks are most welcome here. Thank you.

    Product Preview Card

    2
    Kate Dames•250
    @funficientPosted about 1 year ago

    Congratulations on completing the challenge! To add to what @Thodoris-Diamantidis already mentioned, here is an example of how you might create a media query for a mobile device:

     @media (max-width: 785px) {

    .grid-container {
      grid-template-columns: 1fr;
    }
    }

    Use the breakpoints included in the style guide, and simply list all the changes from desktop view (in this case). Typical things that change for mobile view is padding or margins, font sizes, and stack order of components.

    The way I approach it is to look at both the desktop and mobile designs carefully before I start anything to see what is different in the layout. This helps me decide whether to use grid or flex for example, or how to structure the page.

    Good luck! Hope this answers your question. Happy coding! Kate

    Marked as helpful
    2
  • Judge Micko S. Silvestre•395
    @mickoymouseSubmitted about 1 year ago

    Another one for today!

    I had fun doing this one. As usual, I set my expectation on how long I think it would take me to do this and my expectations are more or less accurate. That being said, I am definitely rusty and in need of many more challenges to get back on groove!

    Specific part I would like to get feedback here is the socials part. I was wondering what other approach or what the best approach is to put it on the lower right with the rest of the items still dead center. My approach was using absolute positioning but I feel it's a bit scuffed. I can't shake the feeling that there is definitely a better approach.

    That being said, I am excited to see how my fellow developers implemented their solution!

    As usual, feedback and constructive criticism are definitely welcome and appreciated. Thank you!

    Huddle Landing page with Tailwind Css

    2
    Kate Dames•250
    @funficientPosted about 1 year ago

    Hey! Nice solution!

    I'm not sure if it's best practice, but the way I handled the social icons is by sizing the body as 100vh:

    body {
  background-color: var(--color-primary-voilet);
  background-image: url(assets/bg-desktop.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

    The footer element which contains the social icons is then simply positioned at the end of the box which is 100vh.:

    .footer {
  display: flex;
  justify-content:flex-end;
}

    Hope that helps! Kate

    Marked as helpful
    2
  • Vladimir Gatara•250
    @vgarmySubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    i like the spacing in my component. But would like to make shorter css code.

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

    No challanges at this porject, pretty straigh forward,

    What specific areas of your project would you like help with?

    None

    QR code component with HTML and CSS

    2
    Kate Dames•250
    @funficientPosted about 1 year ago

    Well done on completing the challenge! I agree with @gfunk77, your CSS is pretty good!

    The only way I would shorten the CSS (if it were my code) is to remove the triplicate border-radius definitions. I only use the standard border-radius: 0.75rem; without the webkit versions and it works fine.

    Also, I would move the width element to the container level rather than duplicating it for both the h1 and the p text. In other words, remove it from the h1 and p sections and handle the width for the parent container :

    .container__card__body h1 {
    font-weight: 700;
    ***width: 265px;***
    font-size: 22px;
    color: var(--darkblue);
    margin: 2rem 0 1rem;
    text-align: center;
}

    Another thing that I find useful is to define the h1, p, etc. as standalone and not as children of the container. This will not shorten your code for this challenge, but it would potentially shorten it if you had other containers re-using the same definitions. For example:

    .container__card__body h1 {
}

    becomes

    h1 {
}

    If you keep it the way you defined it as children of the container, you will have to redefine the h1 and p elements each time you use it on another container, which might get confusing.

    Hope that helps! Enjoy your next challenge! Kate

    Marked as helpful
    0
  • Abhishek Baliyan•110
    @abhishek-baliyan-devSubmitted about 1 year ago
    • Why Frontend Mentor give desktop width - is this for breakpoint, Because i didn’t use it any where.
    • why i am having a space between image section and text section. Because of this i have to use position relative and top property.
    #product-image {
    position: relative;
    top: 3px;
}

    Thanks for the help in advance.

    Product preview card component using CSS flexbox & mobile-first

    1
    Kate Dames•250
    @funficientPosted about 1 year ago

    Hey @abhishek-baliyan-dev! Great solution!

    The breakpoint for desktop is included for reference to the designs that are included. The size of the designs are based on the breakpoint sizes as far as I understand. It is useful because some desktop screens are very big which would require using max-width, or minmax() rather than just padding and margins to position the items.

    Regarding your other question, I suspect the space is because you handled the image and the text as sections rather than divs. A section, as far as I understand, is more like a fixed block on the page, while a div is an element on the page or in a block that can be positioned in any way, which gives it more flexibility. But disclaimer, I'm still learning too. :-)

    Hope this is helpful! Enjoy your next challenge!

    Kate

    Marked as helpful
    1
  • Kate Dames•250
    @funficientPosted about 1 year ago

    I'm not sure why I'm getting an accessibility issue as I have the required code in my html? What am I doing wrong?

    0
  • Kate Dames•250
    @funficientPosted about 1 year ago

    Well done! Your solution looks great!

    I notice your icons aren't showing. It looks as if the folder with the assets are missing. Your code:

    <div><img src="assets/images/icon-reaction.svg" alt=""></div>

    But there is not assets folder. Adding an alt description will also improve the accessibility.

    Also, the gradients look as if they are the wrong direction. You can simply switch around the values:

    background-image: linear-gradient(#2F2CE9,#7755FF); to background-image: linear-gradient(#7755FF,#2F2CE9);

    Other than that it is a great solution. Looks very close to the design!

    Enjoy the next challenge!

    1
  • Kate Dames•250
    @funficientPosted about 2 years ago

    Hey @Surya8991, congratulations on submitting your first challenge!

    You can get rid of the accessibility warnings in the report above by adding a <main> and <footer> section to your html.

    You can also center your content by removing the set margins and adding the grid center properties and height to the body, like:

    {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
text-align: center;
display: grid;
height: 100vh;
align-items: center;
justify-content: center;
}

    Lastly, to make the H2 text more readable, I could suggest adding some padding. Other than that, it looks great!

    Well done! Hope this feedback is useful to you. I'm learning by trying to teach ;-).

    Happy hacking!

    Marked as helpful
    0
  • Kate Dames•250
    @funficientPosted about 2 years ago

    Well done! This looks really good!

    To fix the accessibility report issues you can just add a <main> section in your html. (I don't know much about accessibility, but this much I do know!). Screen readers need the symantic tags to understand the context.

    A small issue, your text for h3 should be font-weight: 700 (and I would make this h1 to address the accessibility report issue) and the p text should be center aligned, but it looks great as it is!

    Hope this helps! And welcome to the FrontEndMentor community! Kate

    0
  • Kate Dames•250
    @funficientPosted about 2 years ago

    Hi @fritzadelbertus 👋, well done! Your solution is great.

    The main difference between flexbox and grid is that flexbox is for one dimensional layouts, while grid is for two dimensional layouts, meaning it includes rows and columns. This solution only has one card, thus flexbox would be the standard choice for most developers, but using grid is by no means wrong.

    The way I think of it is that grid is like a wireframe, or literally a layout grid, to help you keep all the elements aligned and in the right place, while flexbox is when I need more flexibility for a specific component (either within a grid or on its own). I tend to use grid as the main layout of a page, and the flexbox inside the grid to style the different grid areas.

    Here is a summary of some really well described use cases by Jose Granja even including a bit of history and how it evolved.

    Some use cases for Flexbox:

    • When you want to align items within a container, flexbox is a good choice using the align-items property.
    • When you want to evenly distribute items, flexbox will be the better choice.
    • When you have more complex positioning in one dimension (like a top navigation bar with options evenly distributed but a logo to the left) flexbox is the better choice.

    Some use cases for Grid:

    • When you want the layout to have even spaces (or gaps) between the blocks grid is the better choice using the gap property.
    • When you want the contents to have a specific width grid is your friend.
    • When you want to layout a complex two dimensional area, for example the main page layout without any content in it, grid is an excellent choice.

    If you want to learn more about grid, Wes Bos has an excellent free course on all things CSS Grid.

    Hope this helps, and happy coding!

    Marked as helpful
    0