Skip to content
OverviewSolutions
10
Comments
9
Fernanda
@ferlagher

All comments

  • Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, Ravindra!

    There are many ways to make a design responsive. You can use media querys, relative units, flexbox, grid, or a combination of all of them.

    Here are some resources:

    0
  • Warrick•20
    @wozdogSubmitted over 2 years ago

    All feedback welcome.

    I had some trouble with the responsive images. You will see in the desktop screenshot the white space under the button. This is the image pushing down the grid. I tried adding the images in CSS using background images, but that came with its own complications. I'm keen to see how others have done it.

    All in all, it was a very time-consuming process for something so simple. I'm looking forward to speeding up a bit with practice. Thank you for your time.

    Responsive Product Preview Card

    1
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, nice work with your solution!

    Here are my recomendations:

    • Add to the body min-height: 100vh, display: flex and align-items: center, for center your card.
    • The wite space under the button it's because the content has too much horizontal space and can't wrap. In the .content class, make the padding bigger (3rem) so the content fills the container vertically and it matches the design.

    Hope it was helpfull!

    0
  • Ola•40
    @O-O26Submitted over 2 years ago

    Hi, this is my first front-end mentor challenge. I found most of this challenge to be relatively basic however, I somehow struggled to center the whole container despite spending some time on it. I would really like some feedback on what I can improve on thanks.

    Also I am not sure how to use GitHub pages so I please use the link to my github page instead.

    QR Code scanner

    1
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi! Your page is not displaying correctly because you don have any "index.html" in the root of your repository. You have to rename your "qrCode.html" to "index.html". This applies to any website, the home page must always be "index.html" and it has to be in the root of the project. I also recommend you to move the styles to an external css file (just copy all the code inside the style tags, without the tags) and then link the css to the index.html using <link rel="stylesheet" href="./path/to/your/css"> inside the <head> tag.

    Marked as helpful
    1
  • Fidget836•20
    @Fidget836Submitted over 2 years ago

    This is my first HTML/CSS challenge so if you see bad details in the code or bad organization of the elements, don't hesitate to tell me, so I can avoid keeping these potential bad habits. But I wonder especially how to change the text in css with the media queries? In this challenge, we can see in desktop version "Gabrielle <br /> Essence Eau De Parfum" and after in mobile version "Gabrielle Essence <br /> Eau De Parfum". How i can change that ? Thank you. Have a good day.

    My first challenge HTML / CSS - Product preview card component

    3
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, nice work with your solution! I like the hover effect on the button! 👍🏻

    You don't need to use <br/> for the line break! In this case, the difference between desktop and mobile layout is due to the padding of the right/bottom container. It's a bit hard to notice, but it's slighty bigger in the desktop view, that makes the text wrap erlier than in the mobile view.

    Also, I reccomend the <picture> container for the img. You can specify many sources for your image and when they displayed or not, depending on the viewport. I personally find this way easier than using media queries. And you can give your <img> a width:100% and a height:auto to keep the aspect ratio.

    Marked as helpful
    0
  • To Dat•290
    @tltd0807Submitted over 2 years ago

    HI, I need some feedback for the responsiveness of my code about the img, it's quite confusing to me. Any feedback or suggestions would be highly appreciated. Thanks for your kindness

    profile-card-component

    1
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, congratulations on completing the challenge! You can use an asterisk for the reset instead of writing every single element, like this:

    * { /* your rules here */ }

    That way you can save a lot of lines in your code.

    0
  • Snehamoy Bag•600
    @snehamoybagSubmitted over 2 years ago

    This my solution to the Product preview card component challenge. I used grid and flex together to achieve the desired outcome. Although for some reason my tittle font looks different compared to the given design 🤔 am I doing something wrong? Please show me the light 🙇🏾‍♂️

    Product Preview Card Component

    1
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, I had the same problem with the fonts. I fixed it by disableing the optical size option in Google Fonts and re-importing the fonts to the project.

    Here is the said option

    Marked as helpful
    0
  • Edward Cicio•20
    @Ed-CodePowerSubmitted over 2 years ago

    I have a hard time understanding how to set mobile size. For example, I have to make different HTML files for each. Is there another way to do it?

    I would like to hear your opinion about how I set up HTML elements. Is it the right amount of elements or too many elements?

    I want to hear your advice about committing in CSS.

    HTML and CSS.

    2
    Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi! For the screen size, you can give the body a width:100% and a height:100vh. That will make your body the size of the viewport. There's no need for making diferent files for diferent sizes, you can use relative units (like %, vh, vw, rem and em) and media queries to adapt the page to the screensize. About the HTML elements, I think you could reduce the amount, for expample, the .verticalcenter one, and give the card a margin:auto, that will center your card without needing another div.

    Have a nice day! :)

    0
  • Alejandro•90
    @AlejandroLR00Submitted over 2 years ago

    I have finished this project. Could you give me some feedback about my code.

    He terminado este proyecto. Me podrían dar algún comentario acerca de mi código.

    Product preview card component

    2
    Fernanda•180
    @ferlagherPosted over 2 years ago

    La etiqueta <picture> te sirve para cambiar de imagen según el ancho de pantalla sin necesidad de usar css. Así te ahorras escribir mucho código y media queries. HTML <picture> Element

    0
  • Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi! The poition: absolute in the .container class is breaking the card when the screen is resized. For centering stuff in the middle of the page you first need to set the height of the body. Using height: 100vh works for me. Then you can use auto margins, flexbox or grid for center the content. I hope this was helpful, this is my first feedback! 😊 Sorry for my bad english.

    Marked as helpful
    1