Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • DanielK 440

    @DanK1368

    Submitted

    Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.

    I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)

    Byron 2,290

    @byronbyron

    Posted

    @DanK1368 Hia mate.

    Try position: fixed; instead of position: absolute;, to fix the scrolling issue.

    @media screen and (max-width: 670px) {
        .ggprRt {
            /* position: absolute; */
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            transform: translateX(110%);
            opacity: 0;
        }
    }
    

    Marked as helpful

    0
  • Byron 2,290

    @byronbyron

    Posted

    Hi @Chillidot

    If you remove the height: auto; from the your style.css below, that should fix it in safari!

    /** Circle **/
    svg{
        max-width: 100%;
        /* height: auto; */
    }
    

    Hope that helps!

    Marked as helpful

    1
  • @ujwalvinay

    Submitted

    How to make the eye icon visible while hovering over the image? How to make it responsive for smaller devices?

    Byron 2,290

    @byronbyron

    Posted

    Hi @ujwalvinay

    You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

    <div class="img-wrapper">
        <img src="images/image-equilibrium.jpg" alt="image" id="banner">
    </div>
    
    .img-wrapper {
        position: relative;
    }
    
    .img-wrapper::before {
        content: '';
        background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
        display: block;
        border-radius: 1.2rem;
        position: absolute;
        top: 0;
        right: 5%;
        bottom: 0;
        left: 5%;
        z-index: 100;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
    }
    
    .img-wrapper:hover::before {
        visibility: visible;
        opacity: 1;
    }
    

    Hope that helps! 👍

    Marked as helpful

    2
  • Byron 2,290

    @byronbyron

    Posted

    Hi @MikeAngel2

    You should be able to center the second card by updating your index.js to set display flex instead of block.

    $(".Thanks").css('display','flex');
    

    This bit of CSS should help to center the text on the second card as well

    .Thanks {
        align-items: center;
        text-align: center;
    }
    

    Hope that helps!

    Marked as helpful

    2
  • Abrosss 440

    @Abrosss

    Submitted

    Hello. I am not sure if height and width of the container should be dynamic, depending on the random advice text or fixed?

    Byron 2,290

    @byronbyron

    Posted

    @Abrosss Looks good!

    Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.

    Few html/accessibility issues:

    Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)

    Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)

    Marked as helpful

    2
  • Ganesh 280

    @Ganesh-Rathor

    Submitted

    Nice challenge for me.

    1. why is the styling on slider are appear only in mozilla firefox browser (because of using -moz-range-thumb) then how to solve this issue and serve the style to all other browser. everything that I style are invisible in my brave browser why and how to solve it. plese give me feedback.
    Byron 2,290

    @byronbyron

    Posted

    @Ganesh-Rathor To style range input on chrome/brave (webkit) you can use:

    input[type=range]::-webkit-slider-runnable-track {}
    input[type=range]::-webkit-slider-thumb {}
    

    Marked as helpful

    0
  • Byron 2,290

    @byronbyron

    Posted

    Hey @jillpandya2594, Hopefully this fixes your grid!

    .container {
        margin: auto;
        max-width: 40rem;
        padding: 2em;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    main {
        padding: 2em;
        background-color: #fff;
        grid-column: span 2;
        align-self: flex-end;
    }
    
    section {
        display: flex;
        flex-direction: column;
        padding: 2em;
        background-color: hsl(179, 62%, 43%);
    }
    
    aside {
        padding: 2em;
        background-color: hsl(180, 62%, 47%);
        line-height: 1.6;
    }
    
    1
  • @NellyisDevv

    Submitted

    • This first project was straight forward and pretty fun to complete overall. The only issue I ran into the first time was making it mobile friendly, after I switched to flex box it, that issue was solved.

    • Centering my QR code to the center of my container was something I feel I could have done better, instead of doing this inside of CSS I opted for the <center> tag in html.

    • Is there any guides on how professional web developers set up their CSS files?

    Byron 2,290

    @byronbyron

    Posted

    Nice job @NellyisDevv

    I would avoid using the <center> tag as it's well out of date, and no longer recommended.

    To display your QR code a tiny bit better on really small screen widths (around 320px) I would do something like this:

    .qr-container-background {
        background-color: var(--White-);
        padding: 20px;
        border-radius: 20px;
        max-width: 320px; /* Set max width of card */
        width: 100%; /* Full width up until 320px */
    }
    
    .qr-container-photo img {
        border-radius: 10px;
        width: 100%; /* Set image to fill width of the container */
        height: auto;
    }
    

    For a small project like this, I think your CSS file set up is absolutely fine!

    Also, you've got a few Accessibility/Html issues that you could resolve for a perfect score.

    Marked as helpful

    0
  • @TotallySly

    Submitted

    I know the colour on the hover states is incorrect. But I just could not figure out the correct colour scheme to use.

    Also, I am a bit concerned that the sizing of the design. It is massively different to the design brief. In the real world, would this be a major concern? If so, are there any websites that can scale images and give the correct pixels for my future design???

    Again, thank you for all that will review my code and give feedback.

    Byron 2,290

    @byronbyron

    Posted

    Hey @TotallySly, it looks alright!

    For the button hover, I used a slight opacity instead of the background colour, something like:

    .payment--container button:hover,
    .payment--container button:focus {
        opacity: 0.75;
    }
    

    For the sizing thing, it depends on how picky your client is in the real world 😅. When I want to get the image size from the design image, I usually open it up in Preview (mac) and drag a square around the image to get the dimensions.

    For your Order Component, it looks like your background images aren't coming through. Something like this should help I think (feel free to play around with the background-size values):

    body {
        ...
        background: url(images/pattern-background-mobile.svg) no-repeat, top center hsl(225, 100%, 94%);
        background-size: 100% 194px;
    }
    
    @media screen and (min-width: 908px) {
        body {
            background-image: url(images/pattern-background-desktop.svg);
            background-size: contain;
        }
    

    Marked as helpful

    1
  • Byron 2,290

    @byronbyron

    Posted

    @EmmanuelOloke Looks good!

    Your <section> elements ideally need a heading tag inside them somewhere 👍

    That's my 5 pence 😅

    Marked as helpful

    1
  • DanielK 440

    @DanK1368

    Submitted

    Hi guys,

    Please provide some feedback. :)

    The app isnt perfect, I still have some problems to fix:

    1. background-image: url("../../../assets/icon-check.svg"); This is my file path for the check mark inside the button. However, github pages isnt displaying it. Isnt that the relative file path to be used if the file is 3 layers deep?

    2. The draggable feature works on the todo items that are already there. However, the code breaks once new todos are added? What am I doing wrong?

    Thanks guys :)

    Byron 2,290

    @byronbyron

    Posted

    @DanK1368 Looks good!

    1. background-image: url(../../assets/icon-check.svg); will get you the checkbox!
    2. It sounds like your todo ids aren't correctly being set. I had a similar problem and solved it by using SortableJS and nanoid

    Marked as helpful

    0
  • Adam M 550

    @AdamMzkr

    Submitted

    Hi, I come back from a 1year break to the front-end and I try to remind important topics. I hope with the realization of the front-end mentor challenge my skills come back and even grow.

    I am ready for critics :)

    Byron 2,290

    @byronbyron

    Posted

    @AdamMzkr Looks great!

    Just missing a <main> tag, that's all.

    Nice job 👍

    Marked as helpful

    0