kingcoder• 100
@nigahiga34
Submitted
Ngouend raoul Gerard
@BeinRain06
All comments
- Ngouend raoul Gerard• 500
@BeinRain06
Posted
Hye @kingcoder ! your app looks amazing on desktop, great job !
You can try to implement as well accessibility for mobile :
1/ Navbar (apply a class on it )
- Instead of applying flex on header , apply flex rather on the <nav class="nav_container"></nav> tag
Example below :
@media(min-width:180px) { .nav_container { width:100vw; height:50px; display: flex; justify-content: space-between; padding: 0.5rem 1rem ; font-size: clamp(0.7rem, 0.85rem, 1rem) } } @media(min-width:600px) { .nav_container { font-size: clamp(1rem, 1.1rem, 1.25rem) } } @media(min-width:960px) { .nav_container { font-size: clamp(1.25rem, 1.5rem, 2rem) } }2/ add class:".main_sneakers" to the <main class="main_sneakers"></main> tag and apply flex method
@media(min-width:180px) { .main_sneakers { width:100vw; padding: 0.5rem 1rem ; display: flex; flex-direction:column; justify-content: center; align-items:center; gap: 1.5rem; } } @media(min-width:960px) { .main_sneakers { flex-direction:row; justify-content: center; align-items:center; gap: 1rem; } }3/ what @media(min-width:<size>) { //some code}
-
@media(min-width:180px) {
// some code} means apply the style in bracket for screen or media devices display of at least 180px(<= 180px) -
@media(min-width:600px) {
// some code} means rewrite the new style in bracket for screen or media devices display of at least 600px(<= 600px) and so on...)
The way to implement accessibility is to dive into media queries implementation formula
Using @media(min-width: 180px) {
//some code} is one of these formulaFor other formula you could use the term max-width or min-width and max-width instead of using min-width approach.
Hope This Could give a clue for performing responsiveness.
Feel free to reach me if you might have to remind me of something i forgot.
Have an Amazing Day/Night @kingcoder ! Keep going with your project you have become good designing some Desktop Page, Go on , and don't stop your progress.
Stay safe and healthy.
0 - Alex 🤸🏻♂️• 700
@sksksk2024
Submitted
What are you most proud of, and what would you do differently next time?
I understand some of the react logic!
What specific areas of your project would you like help with?
The only problem is that I can't make the React work with my current tools(look in my code). To be more specific, npm is installed properly, but for some reason, it doesn't work for React(same with Yarn) -- and with Tailwind CSS was difficult to set up, but I make all the work manually(taking the code i needed, and it worked -- and it was easier because is not my first project in Tailwind). 🤔 Maybe is too early to learn React, but I'd appreciate any advice, and maybe I'll retry this challange with React after I finish all the current learning path. Thank you in advance!!😊❤️
Ngouend raoul Gerard• 500@BeinRain06
Posted
Hye @sksksk it seems something fishy is affecting the npm package you installed manually .
You might like to use designed webpack or vite tool to kind of configure environment of you app automatically and much easier , just using some script syntax in your computer's terminal command.
1/ try open the terminal command :
- navigate under the repertory where you want to create your **project in** - Do not enter this specific folder, rather do a right click, and choose appearing options **open in Terminal** - Wait until the terminal fully open, with cursor beating right after the path link of your directory2/ Install React using Vite Tool :
- for example , if you choose **vite** you can install the ecosystem of vite , and also at same time react using the command : npm create vite@latest my-project -- --template react- after the end installation type :
cd my-project3/ Install Tailwindcss using the both command below (one after the other ) :
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p3/ configure basically tailwind.config.js file :
export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }If something went wrong feel free to reach me.
Hope it could be of one help
Have an amazing day or night @sksksk , teasing project encompassing man technologies like that will undoubtedly improve your skill on fastening your productivity while coding.
Stay Safe and Healthy.
Marked as helpful
1 - Ibukun450• 390
@Ibukun450
Submitted
Ngouend raoul Gerard• 500@BeinRain06
Posted
Yeah @Ibukun450 amazing your application operates well.
You need just only to improve the responsiveness
Don't try to make it hard one thing I noticed is that you began styling your page within index.html* and end it into style
I feel like a most efficient way to tackle responsiveness is to group all style in one place.
Then you can also make the container respond accurately to change you apply.
Try moving this section of code in your style.css:
body { background-color: #c4e5e8; **width:100vw;** display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; font-family: 'Space Mono', monospace; } .main-container { width: 50%; padding: 20px; height: auto;; background-color: #fff; border-radius: 15px; padding: 30px; }Adding width :100vw ; to the body
you can also design at least 2 stage of responsiveness for your application using
@media and screen (min-width:180px) {
...
}
And
@media and screen (min-width:760px) {
...
}
For mobile and tablet or desktop
And change your main-container to have a width of 100% when styling mobile form play with some padding, margin, flex-direction and that it's pretty it.
You will wondering your new design, at least it could be a shift better.
You have the right to do this. And feel more happy about your project.
Well with that says I hope you a nice night /day @Ibukun450. glad to meet you in the front of line, and will to continue to see you on a next time.
0 - soufianeoualla• 600
@soufianeoualla
Submitted
Ngouend raoul Gerard• 500@BeinRain06
Posted
@soufianeoualla yeah that's a pretty good work!
Your website is fully responsive in mobile
But it looks like something went wrong with image when submitting
You may want to find what's going on and make your project more beautiful!
I stepped inside your projects. Maybe try when building useState of notifications array to rather links your src image
like this model :
"src": "./assets/avatar-mark-webber.webp",
instead of that one
"src": "src/assets/avatar-mark-webber.webp",
hope it could be a help when trying out to display your images correctly @soufianeoualla
Have a nice night /day and keep doing amazing stuff like that. You have the will to make it beautiful
1 - Kudakwashe Ndoro• 220
@ndorokuda
Submitted
Hello, after doing this mini project, I was left with many questions but the one that challenged me the most is how do you decided when to use CSS Flexbox or CSS Grid
Ngouend raoul Gerard• 500@BeinRain06
Posted
Hey Ndorokuda Amazing! You have got to make your first project responsive while using grid. Congratulations
Using grid or flexbox is a matter of how you want to align box in your project.
For example if you want box to lay out one on top of other or right of each other into one line (x-axis or y-axis) you better want to use Flexbox* flexbox is a kind of junior brother for grid
But grid is like it sound is to make grid landscape. Think about gate of prisoner in jail. The grid is this gate when you want to organize elements box in two ✌ dimensions ( x and y) you think about grid implementation.
In your project your boxes have 2 dimensions. You can notice this by regarding their width or height Some boxes are twice in width than others while others are 2 times height of others.
This is manipulation of 2 axis
You choosed a good one(project) to stand with, I assume you're learning grid grid is more powerful to organise multiple box of different size together in one container
Hope that makes sense and give you a light 💡 of understanding.
Keep going on, you got a lot with this project and I wish you will do the same for the others. Great work
Have a nice Night/day and stay put on your work. You look to become a great coder...
Marked as helpful
1 - Mahmoud Abd-alnasser• 210
@Mahmoud-770
Submitted
Ngouend raoul Gerard• 500@BeinRain06
Posted
Hey Mahmoud abd well done with your project.
You might want to select media queries for mobile (min-width:375px) and tablet (min-width:736px)
@media (min-width: 736px) { ... }
@media (min-width: 315px) { ... }
You may want to set
grid-templates-column to repeat (auto-fill, cal(94vw))
**grid-templates-row to auto
For mobile
Have a nice day /night keep going into your amazing journey and fill glad whatever time or difficulties you encounter.
The best comes from the unknown. And I'm grateful to see that you can be part of it Mahmoud abd
Marked as helpful
2 - star-369• 280
@star-369
Submitted
What I have learned from this challenge:
- How to use tailwindcss
- How to use tailwindcss arbitrary value
- Configuring custom variable, font, box shadow in tailwind config
- Importing Google Fonts to CSS
My question to the community: How do you make the pattern background mobile to have width of 100% ? (it seems that the pattern have a fixed witdth)
Update Moving this project to react and doing revision(Update 4 Feb 2024)
Ngouend raoul Gerard• 500@BeinRain06
Posted
Amazing work @star-369 you have done quite great with the mobile design of your order summary component.
One way to make it more looking good is to fix the image flow that push the entire general container make it overflowing right and left in your mobile version.
One way I suggest is to put your image inside a div and style this div with width = 100 vw and height = your previous height ;
And after style img width and height using percentage units.
Like e.g underneath : Index.html :
<div class="img-wrapper"> <img src="./image.png" class="my-img" alt="picture missing" /> </div>And style.css :
.img-wrapper { position:relative; top:0 width:100vw; height: 80px ;// example overflow-x: hidden ; } .my-img { width: 100%; height: 100%; object-fit:cover ; }object-fit:cover will make your img fit the div container and overflow-x: hidden will prevent your img to push the container and as well will maintain the img inside the x axis of that div container avoiding a float .
Hope that can be a help @star-369 b and keep going like that you will definitely unlock many skills, nice day/night and happy coding!
Marked as helpful
0 - Paras Sharma• 700
@imparassharma
Submitted
I use rems pretty much and recently I read somewhere that rems should not be used for paddings and margins. Can anyone look into my code and can tell me the drawbacks of using rems in the given solution and what alternative I can use so to make it more responsive. Any other feedback is also welcome.
Ngouend raoul Gerard• 500@BeinRain06
Posted
Your are welcome, @imparassharma You can link css file in your main.js file of react not do an inline-css. Here above is what I'm suggesting :
create a file called style.css in the same directory that your main.js file
Add some style in this css file. Now to link it to your main.js file: --> open your main.js* file and Write this line at the top :
import "./style.css"And see if it works to implement your style written on this later file.
Hope that make sense if some issue appears again could leave me some brief explanation I will try to lead my answer through the best I could. Having this nice journey, I'm just keep saying happy coding to you @imparassharma
Marked as helpful
0 - Paras Sharma• 700
@imparassharma
Submitted
I use rems pretty much and recently I read somewhere that rems should not be used for paddings and margins. Can anyone look into my code and can tell me the drawbacks of using rems in the given solution and what alternative I can use so to make it more responsive. Any other feedback is also welcome.
Ngouend raoul Gerard• 500@BeinRain06
Posted
Hello @imparassharma I have seen your mobile app. But what I wondering why, you didn't use style.css file to style the whole main.js file
But my quick way to see to correct each section is in mobile to stack the section Stay updated over the section with big image.
For e.g I think you might do something like that :
<div class="section-one padding-effect"> <div class = "content-section-one"> ... // some syntax section one </div> </div> <div class="section-two padding-effect"> <div class = "content-section-two"> ... // some syntax section two </div> </div>And in style.css try this along or either with your javacsript code:
.general_wrapper { width: 100vw; ... } .padding-effect { width: calc (100% - 1em) margin: 0 auto; ... }To make the padding of 1em each time in mobile. Instead using rem units you might use em units in mobile but not in desktop because it become quite large due to the fact that em unit is calculated according to the direct parent element with that grows bigger in desktop style.
Hope you might have a solution to fix the displaying, and also have a nice day /night@imparassharma
1 - Dolly-Pee• 140
@Dolly-Pee
Submitted
I will really appreciate if someone can help me with how to return a single number when entered in my calculator when no operation is carried out on it after pressing the equal sign button without returning nan
Ngouend raoul Gerard• 500@BeinRain06
Posted
Great Dolly you added regex function in your javascript code, good work, keep going on.
To fix this bug NaN :
Try to add this line code in :
else if (buttons[I] === equalBtn) { firstNumber = initialNumber[0]; //**add** if (isNaN(firstNumber)) { return counter;// initially counter=0 } counter += firstNumber ; ...}
You can go ahead and Try it to see if it's working to put the result to zero.
Have a happy coding Dolly
0 - scurlly• 80
@scurlly
Submitted
How to make a div separate images on mobile and desktop? How to give proper height to the div when setting the background image in CSS?
Ngouend raoul Gerard• 500@BeinRain06
Posted
Amazing Scurlly you went through this sunnyside landing page and it looks good on mobile.
One way to display different images based on mobile and desktop is to use ✌ two different boxes container one for the img mobile and the other for the img desktop and in media queries. E.g: @media (min-width: 210px) {
.img-desktop {
display :none }. img-mobile {
width :100%; height: 100%; object-fit: cover; }}
@media (min-width: 960px) {
.Img-mobile {
display :none }. img-desktop {
width :100%; height: 100%; object-fit: cover; }}
Don't forget you have to put your img in a container div for each case and give that div a specific width and height., set positioning.
And after that the above code given first with specificly the property object-fit:cover will handle a suit view of your image
Hope that this will be helpful and give you a hint for improving the view of your image in future projects Scurlly.
Marked as helpful
0 - Nayan Bhatt• 980
@freaky4wrld
Submitted
Hello all, this one is very much interesting and cool challenge, adding to this if you are previewing the site on Google the theme slider doesn't look that cool as it looks on Mozilla(browser that I use) any suggestion on that, would be glad to discuss.
ALSO A QUICK QUESTION How to make my project to reach more people, so that I get more valuable advice, and I want to network with community member, how to do that as well.
Thank you for all the appreciation and valuable time spent to provide feedback
Ngouend raoul Gerard• 500@BeinRain06
Posted
Amazing Nayan you ⛏ picked a good challenge to test your JS abilities and your css grid skills. Your questions is about how to fix the show of your Theme container in chrome :
Firstly input tag are sometimes subject of show change based on the browser you use. THAT happens because of different technologies each developer of these companies use to implement the browser
To correct that chrome has come with features like: -webkit-
Concerning your project try to add in
#calc-theme:-webkit-slider-runnable-track { ... margin: 0 auto;
}
And also :
#calc-theme::-webkit-slider-thumb { ... padding :0;
}
Or either one of the both previously mentioned.
You may want also to add transitional effect when the circle of your theme container move
You can do it by adding in #calc-theme an effect
E.g transition :all 1s ease-in-out ;
#calc-theme { .... transition: all 1s ease-in-out ;
}
Hope with that you will be able to make some move to fix the problem Nayan.
Marked as helpful
1
