Skip to content
OverviewSolutions
17
Comments
21
Chevalier Antoine
@SeyBoo

All comments

  • Simon•100
    @OldaultSubmitted over 2 years ago

    -I couldn't find a way to make the desktop sized webpage responsive, so I improvized and made the mobile version expand; instead of making large webpage shrink. -I had a hard time figuring out how to change the picture based on the size, so i just used the desktop version of the picture on the mobile style. -I still don't know how to change that grey picture to a different colour using code. So i went ahead and modified it using PhotoShop (+Added bonus to the girls laptop) -The webpage isn't responsive when you higly alter the height of the webpage. It can support the width changes but when you start converting the heigh, it doesn't adjust. -I find that the margin is way too big between ~500-350px width, and i dont know how to change it. -It isn't responsive past 250px width for some reason.

    Neon Pink responsive stat preview card

    2
    Chevalier Antoine•670
    @SeyBooPosted over 2 years ago

    Hi Monkey Man,

    Quick note but 250 px is very small and no modern phone will every have such a small screen so don't worry about it.

    For the background image, you can add a color to it this way, background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160); You just need to slow down the opacity of the color

    And to change the picture based on the size you have two way

    • Using img tag :
    // HTML

<img src="#" alt="#" class="desktop" />
<img src="#" alt="#" class="mobile" />

// CSS 

.desktop {
display:none;
}

@media (min-width:1024px) {
.mobile {
display:none;
}
.desktop {
display:block;
}
}
    • Background Image
    //CSS
background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160);

@media (min-width:1024px)
{
background: rgb(126, 85, 85, .5) url(url for dekstop);
}
    1
  • Chevalier Antoine•670
    @SeyBooPosted over 2 years ago

    Hello ! Bravo for your first react solution ! For best practice you could :

    • Create a file for every component that you created so it's easier to read
    • The App file is not a component so i shouldn't be in the components folder
    • Instead of using style={{display:show ? "":"none"}} you should look for conditional rendering (I was doing the same mistake ahah)

    https://reactjs.org/docs/conditional-rendering.html

    const [showModal, setShowModal] = useState(false);

{showModal ? <Modal />  : null }
<button onClick={() => setShowModal(!showModal)}>Display modal</button>

    Have a nice day :)

    Marked as helpful
    0
  • Chevalier Antoine•670
    @SeyBooPosted over 2 years ago

    Hello !

    Bravo for your first solution using React.

    For best practice i will suggest you to

    • Save your API response into an Array
    • Using a components for the card
    • Using meaningful name for the Image (Can help when working on large project or with a Team)

    You could also try to make it more responsive by starting to make it mobile first. A lot of website are built Mobile First nowadays cause the majority of the traffic is on mobile device.

    Have a nice day :)

    Marked as helpful
    1
  • Chevalier Antoine•670
    @SeyBooPosted almost 3 years ago

    Hello nice solution your code is clean and everything work well !

    Just a small design update you can do is add : transform: scale(.9); on the Mobile Section it will be cleaner in my opinion and you don't have a lot of code to change using scale.

    Have a nice day :)

    Marked as helpful
    1
  • Chevalier Antoine•670
    @SeyBooPosted almost 3 years ago

    Hello nice solution.

    I will suggest you some things you can improve on your project.

    • Make the Design "More Responsive" for the Tablet + More center on the Desktop.
    • Some way you can do that :
    • Your container change based on the view width of the users, so the img should also (if not it will not be centered)

    Have a nice day ! :)

    0
  • Chevalier Antoine•670
    @SeyBooPosted about 3 years ago

    Hello great solution i love the animation that you provide it's simple but add a lot to the website.

    I suggest you some point that you can improve :

    Some visual improvement :

    • Maybe add a max-width on the main element because on larger screen we see 2 row , one with 5 box and one with 3 box.
    • Add a height: 100vh; on the container element so that i can take the full height of the screen.

    JavaScript improvement:

    • A easier way to do the toggle is just to add the class 'light' in the body element.

    For the SCSS part your code is very well cut and organised and seem well typed so well done.

    A overall great solution keep going !

    1
  • Chevalier Antoine•670
    @SeyBooPosted about 3 years ago

    Hello !

    Great solution i agree with Hardy, i will just suggest you some other improvement you can do :

    • Search how to center vertically your components
    • Make some space around when we are on mobile (container { width: 90%; margin-top:10vh; margin-bottom:10vh}

    A great solution overall your code is well typed, well done !

    Marked as helpful
    0
  • Michael•35
    @Mekes1670Submitted over 3 years ago

    If there are any cleaner ways to do this or if I have made any silly mistakes I am new and would love to learn better ways!

    Three Card Column solution

    1
    Chevalier Antoine•670
    @SeyBooPosted over 3 years ago

    Hey 👋!

    Amazing solution one little improvement you can do is make your button a anchor tag.

    Have a nice day!

    1
  • Chevalier Antoine•670
    @SeyBooPosted over 3 years ago

    Hello 👋 !

    You did a very good solution nice work ! I just suggest you one little things:

    • Make your button a anchor tags.

    Keep doing amazing solution like this !

    1
  • Chevalier Antoine•670
    @SeyBooPosted over 3 years ago

    Hello 👋 great solution !

    Everything look good you can try to make it responsive on mobile.

    0
  • Chevalier Antoine•670
    @SeyBooPosted over 3 years ago

    Hey 👋 great solution !

    I will just suggest you one amelioration

    • Add h and p tags on your html.

    Have a nice day 👋 !

    1
  • Chevalier Antoine•670
    @SeyBooPosted over 3 years ago

    Hello 👋 !

    Your code is pretty well organized well done !

    • I will just suggest you to try to make the website responsive on mobile

    Have a nice day great work !

    0