All solutions

Submitted 8 months ago
Using React to finish challenge
HTML
CSS
JS
0
Submitted 8 months ago
Using React to finish challenge
HTML
CSS
JS
0
Submitted 8 months ago
Using React to finish challenge
HTML
CSS
JS
0
1. I have issue when making background image the same as challenge, can anyone help me with background?
Submitted 9 months ago
Finish challenge using React
HTML
CSS
JS
0
I have several issues when finish this project
1. On Desktop design, when hover on share button, I am unable to make the share icon become white.
2. On Mobile design, when click on share button, I have to use a trick to make the media share links (the rectangle thinking bubble) to cover the Author's information using media queries and offset (left, top,...). If the width is less than 375px then that element becomes weird.
3. On Mobile design, when click on share button, I am unable to make the share icon appears on top of the "rectangle thinking bubble"
Submitted 9 months ago
Using React to complete challenge
HTML
CSS
JS
2
In App.js, I use this approach to change from illustration-sign-up-mobile.svg to illustration-sign-up-desktop.svg``` when width > 800px`. But I am not sure if this is a good solution because:
1. When I change from desktop to mobile view using Chrome DevTool with dimension: iPhone SE, I have to refresh the page so that the website updates the mobile svg. Pic1 Pic2 Pic3
2. when I change back from mobile to desktop, i have to refresh the page again so that the website updates the desktop svg of my image. Pic4 Pic5
```
function Banner() {
  return window.screen.width > 800 ? (
    <img src={BannerDesktop} alt="Banner Desktop" className="banner-desktop" />
  ) : (
    <img src={BannerMobile} alt="Banner Mobile" className="banner-mobile" />
  );
}
```
Submitted 9 months ago
Making project using React
HTML
CSS
JS
0
Submitted 9 months ago
Building Project using React
HTML
CSS
JS
1
I have issue when choosing color. In style-guide.md of the project, it requires me to use these color:
```
:root {
  /* ### Primary */
  --orange: hsl(25, 97%, 53%);

  /* ### Neutral */
  --white: hsl(0, 0%, 100%);
  --light-grey: hsl(217, 12%, 63%);
  --medium-grey: hsl(216, 12%, 54%);
  --dark-blue: hsl(213, 19%, 18%);
  --very-dark-blue: hsl(216, 12%, 8%);
}
```
When apply color for numbers, I tried all colors above but can't use correct color as in design images.
Submitted 10 months ago
Responsive landing page using CSS Flexbox
HTML
CSS
0
Submitted 11 months ago
Responsive landing page using CSS Grid
HTML
CSS
0
1. "Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills."
Two sentences above are in the same <p>. I don't know how to break these two in separated line (for desktop view) and combine them into a single line (for mobile view)
1. It takes me nearly 200 lines of code to finish the project. How can I write it in more simple way?
2. This is the 3rd projects and I don't know the best way to center the container (whole component). My only solution is to write like this and pray it works. However, using flex on <body>, I want the component to be bigger (for the width) but I can't because the width of component is fixed at 714px. I set the flex item <container> with max-width: 1000px; but it won't grow any more than 714px.
```
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  max-width: 1000px;
}
```
Thank you guys for the feedbacks.
Submitted 11 months ago
Responsive landing page using Flexbox
HTML
CSS
1
I have problem with height. For other projects, I remember I don't set height for flex's container because I thought the flex container will take up all width and height of the page (not flex items). But for projects on Frontend Mentor, I have to set height of flex container height:100vh;

.container { height: 100vh; /*I don't know that I have to set this so that my flex can be in the middle of page*/ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
Submitted 11 months ago
Responsive landing page using CSS Flexbox
HTML
CSS
1
1. I find it confused whether should I use width: 100% or max-width:100% for <img> tag.
2. Sometimes I see people use a <div> to wrap outside <img>