Skip to content
OverviewSolutions
35
Comments
144
IRVINE MESA
@DrMESAZIM

All comments

  • IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi . I noticed this was your first challenge. I want to start by saying great work indeed . I will share with you this video link which will nsurely help you on how to submit your solution https://youtu.be/QOIo_47FujE

    0
  • IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    I want to help you by

    changing the background image and having hover efferct by setting new properties in your CSS file

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >>

    https://youtube.com/live/32h0DwiaFA8?feature=share

    0
  • IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi lets center the solution vertically at the center add this property

    ..qr-card{margin-top: 5%}

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >>

    https://youtube.com/live/32h0DwiaFA8?feature=share

    Marked as helpful
    0
  • Clea Carty•20
    @CNash23Submitted over 1 year ago

    This is my second challenge. I notice the challenge asked to show the active and hover states so I am curious about how exactly to accomplish this.

    I tried some code for the hover state but couldn't get it to work. And I'm just beginning to learn javascript so I am open to advice on that as well. Thank you in advance.

    HTML and CSS grid

    3
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    HI Clea Carty

    to have hover effect you need to set your code in CSS file to

    .button:hover{background-color : var(--selectedcolorcode)}

    If you find tihis difficult let me know and I can do youtube video or livestream for your editing your code

    Marked as helpful
    1
  • Pablo Santiago Rodriguez Cantillo•50
    @SantiagoRcpSubmitted over 1 year ago

    What did you find difficult while building the project? Which areas of your code are you unsure of? Do you have any questions about best practices?

    Tarjeta Qr

    2
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    welldone I do have one suggestion which I want you to consider is to put some border radius properties on your image

    if you find this difficult to do let me know and I can do youtube video for you editing your code

    0
  • Karim•10
    @KarimSalah26Submitted over 1 year ago

    -It's a simple project. -I'm sure it works. But I think responsive parts could be better.

    • If there is a best practice available, Sure I'd like to check it.

    Display flex, and media query

    2
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi.

    I do have one extra suggestion to make your solution look great by matching the expectations of the challenge

    lets set the background ccolor of the body to to the CSS code background-color: hsl(212, 45%, 89%);

    If this difficult fior you let let me know and I can do a video tutorial for you

    Marked as helpful
    1
  • Ernie Hernandez•10
    @detanadedSubmitted over 1 year ago

    Hello! While I wasn't sure about adding in the original copy that was included in the files, I ended up moving them into a footer. My issue I came across with the footer was how to position it on the page. In this case I used position: absolute and bottom: 1px. When viewing this in dev tools mobile it looks great, however viewing the live site on my iPhone 13 the footer overlapped the container. What would be the best way to go about position a footer and ensuring its responsive? I'd like to not rely on Chrome dev tools

    CSS Flexbox

    2
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi Ernie Hernande. well done that was good work for your first submission project I do want you to consider removing duplicate text found on your footer.

    0
  • Maiphan•100
    @Maipenrai23Submitted over 1 year ago
    1. The difficult point is responsive design while building the project responsive is the most difficult for me
    2. For the unsure code is the responsive part
    3. For questions I haven't yet, but I am really happy to welcome the trips or some suggestions or comments from experts or anyone, I will bring them to develop my skill, thank

    Product-overview-card-component

    2
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi Maiphan

    your solution looks very great . I liked everything especially the mobile responsiveness. I would like you to consider adding hover effect which changes the background color of the button when I hover through

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >> v https://youtube.com/live/L6WTd7HRTMM?feature=share

    0
  • Fabio F.•50
    @fabalvesfrSubmitted over 1 year ago

    Hello everybody,

    First of all thank you for taking your time to review my solution.

    So, I did not know how to round the image edges. I tried to add the "border-radius" image property, but I didn't seem to work.

    Plus my image do not seem to be neither vertically, nor horizontally centered, even though I've written CSS code to make it happen..

    Thank you!

    My first desktop solution using traditional box model

    3
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi Fabio F.

    I noticed you requested feedback on how to center you soution at the center of the page , here are suggestion . inside your CSS file set the properties of the id "card" to

    #card { width: 50%; margin: auto; height: 550px; /* border: 2px solid black; */ box-shadow: 5px 4px 15px -2px #2E2E2E; border-radius: 10px; overflow: hidden; background-color: hsl(0, 0%, 100%); position: relative; top: 50%; transform: translate(0, -50%); }

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >> v https://youtube.com/live/L6WTd7HRTMM?feature=share

    0
  • Chamod Perera•160
    @ChamodJSubmitted over 1 year ago

    I want to know how to align image and text inside the button. I tried few things but it didn't work.

    Product Review Card

    2
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    Hi

    I read your feedback request I do know that by simply ,making use of div that will wrap all the contents you want to align will be helpful

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful
    0
  • Taruna•305
    @Tiyana19Submitted over 1 year ago

    Please Provide your feedback!!! And tell me where I can improve my coding Skills... I usually struggle with my image's width and height property, if you guys can give me some suggestion, that would be a big help. Thank you

    Product card preview with Flex property of CSS

    4
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    Hi Tinker

    Well done for the work you did on this challenge. I do have on suggesting your text is too close to the image . try to push the text away away from image by making use of padding and left properties .

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful
    1
  • António Lobo•40
    @awolf23Submitted over 1 year ago

    Okay, my second project. I had some difficulties, especially with the gaps in the "card" section. I know the button is not great, the svg is not centered along with the "Add to Cart". Any tips on that are welcome, as well as other tips in general! Cheers!

    Product Preview Card Component

    1
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi AWOLF23 your solution is not mobile responsive this can be solved by making use of media queries and flexbox properties

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful
    0