Moamen Abdelrahman• 340
@MoamenAbdelrahman7
Submitted
P
Hexerse
@Hexerse
All comments
- Aimer Filion• 50
@AimerFilion
Submitted
I've been facing some challenges while working on this project, particularly when it comes to implementing responsive design using media queries. I find it quite difficult to determine the optimal number of media queries for different screen sizes in my CSS. For instance, when I set a media query at 1400 pixels, everything seems to work fine, and the layout adjusts accordingly. However, the problem arises when the screen size falls below 1400 pixels. At that point, my website loses its responsiveness, and elements start to misalign.
Do I need to incorporate a range of media queries to cater to various screen sizes more effectively? To ensure that my website remains responsive and visually appealing across a wide spectrum of devices.
There's something I'm doing that isn't working well. Isn't there a way to make elements responsive without having to create multiple media queries?
For the footer part of your code, you can use flex wrap.
Also for less media queries you can check this out: https://utopia.fyi/ (This eliminates the need for media queries) https://www.youtube.com/watch?v=x4u1yp3Msao&t=176s (Teaches you how to let browser do more heavy lifting.
To tackle the shrinking problem. You can use clamp / set a min-width or min-height. So that your pictures / div / text will not grow too small. But too be honest only the programmer will shrink the screen size to those unnatural sizes.
0 - Sergiy• 880
@MrSeager
Submitted
What challenges did you encounter, and how did you overcome them?
Didn't know for sure how to create that image hover effect, but it wasn't hard to find out
I cannot judge this as I don't use react.But it looks great !
1 - P
@prem-kumart
Submitted
What are you most proud of, and what would you do differently next time?
- Create the quiz logic using multiple event listeners and async functions.
- have better planning organize the code
What challenges did you encounter, and how did you overcome them?
- Using Event Listeners to account different states.
What specific areas of your project would you like help with?
- Best practices in writing Code.
No feedback. Instead I am learning a lot from your code.
0 - Pikitamalarose• 310
@ikitamalarose
Submitted
What are you most proud of, and what would you do differently next time?
I am proud to have been able to customise the slider as well the copy clipboard option. This project seemed easy at first glance but after starting i learned a lot. It was great :)
What challenges did you encounter, and how did you overcome them?
I had trouble realising the slider but after several searches i was able to do it. I use tactile events
touchstartandmousedownetc....What specific areas of your project would you like help with?
I would like to know how yo change the colour of a SVG because when i target it with CSS it doesn't work. That way i could add the options hover
index.html
SVG
.header-icon:hover { color: var(--almost-white); }Looks great ! Though for the media queries. I think that you don't need to do so much because the app itself is not that big. Also you should use percentages instead of static values. For example width:100% will follow its container as it grows smaller !
You could also make some of the js code like the uppercase and lowercase letters into a dictionary or objects. For easier extraction later on !
I think the code is abit hard to read because its many small pieces of information everywhere. So I am abit confused when giving feedback. Hope this helps
0 - RamadaniRei• 110
@RamadaniRei
Submitted
Here's some stuff
How to hide number arrows: /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Firefox */ input[type=number] { -moz-appearance: textfield; } From W3
You could also make the code dryer, for example you can move the formulas into their own function. E.g
Const tipAmount = { billperPerson = bill / people; tipperPerson = (bill * tip) / people;}Makes it much easier to debug !
Also theres a blue border around the areas when you focus them sometimes ! If you would like to remove them you can use *:focus{ outline:none}
- targets everything, *:focus targets everything that needs to focus
0 - N1Dovud• 170
@N1Dovud
Submitted
What are you most proud of, and what would you do differently next time?
I was able to dynamically change the content of the html elements, while also dynamically retrieving html elements using a loop. I guess my code was pretty efficient. The next time I would try to spend less time on solving problems.
What challenges did you encounter, and how did you overcome them?
The report div and badge divs were supposed to overlap but they did not, I found out that I needed to add position relative to report div and make it go up a bit relative to itself.
What specific areas of your project would you like help with?
I would love to get feedback on accessibility, responsiveness of the website, and clarity and cleanliness of my JavaScript.
For responsiveness you may want to add something like a grid-template or grid-auto-rows fit-content.
For card why not put the height and widths at 100% and use grid to manipulate them? Since it will fit the grid. Grid is also responsive to the screen due to fr causing the children of the grid to be more responsive.
Try to experiment with less static values and see if you responsiveness increases.
For the user buttons, justify-items: space around. Helps you put space around the buttons evenly. Which will look more like the practice picture.
I hope this helps.
0 - PIvan Orsolic• 240
@ivanorsolic95
Submitted
What specific areas of your project would you like help with?
I would like to know how can I manipulate the position of placeholder inside the input field, where the user should write his email address.
The code is so clean and good. I don't have anything to add !
0 - Agus Setiawan• 400
@Agus27111
Submitted
What i just learn is . . .
- its hard to me to make psuedo elements like ::after in Tailwinds so i just go back with vanilla CSS
- i just learn abaout how i can turn on the display elemnt its hard with logic but i just learn with code of Borys Oliinyk. (thanks)
- i just learn again to make psudo elements like ::before and ::after
- I'm a little familiar now with the javascript code for this session.
i stil have an issue... can anyone help me? I would be very happy with any input you have
- in Desktop screen my image didt cover the parents div, i have try to make it perfect, but it still didt fit.
- in Desktop screen my card dint center corectly in y axis, so i just add margin-top for that, do u have other suggestions?
thanks.
Sorry. I am unable to help. I did not do this question well and I do not use tailwind
0 - PDom Leverment• 100
@DomLeverment
Submitted
What are you most proud of, and what would you do differently next time?
I found this really challenging in deciding when to use grid and when to use flex
What challenges did you encounter, and how did you overcome them?
Mental blocks on all fronts with this one, found it really challenging and i am a little rusty.
What specific areas of your project would you like help with?
i didn't write any media queries in the end. If someone can suggest what i could do i'd be grateful.
Hello, I too am struggling with this one. But some insights I can give is
-
Use Rem instead of Px. It adapts to the screens better
-
Display flex has a function flex: 1. Which acts like grid where 1 in flex = 1fr in grid. U won't need to depend on using static numbers for some of your sizing as the flex will already do it for you
-
In my own opinion, usually I use grid to help layout my items I use grid-template-rows and grid-template-columns combined with grid-template-areas. To create the layout. Then use grid-area to assign the layout to my divs. For the smallers things usually I will use flex. As flex allows me to shift things within the box easier when it only has one dimension. E.g When all the elements are in a row. Or column format WITHIN the div.
Watch Kevin Powell and Slaying the dragon to know when to use grid and flex.
Marked as helpful
1 -
- JmsLpz• 80
@JmsLpz
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that I have learned new things about how to use a grid.
What challenges did you encounter, and how did you overcome them?
The most challenging part I encountered while creating this project was the placement of boxes.
What specific areas of your project would you like help with?
Anything that can help me to improve.
Your code looks great. I think there are ways it can be better though instead of using flex box you can use grid. Which makes the alignment part SO MUCH EASIER ! And simpler, it will take less code. This is how my container code looks like !
.container{ display: grid; gap: 2.5rem; font-family: var(--ff-barlow); width: 90rem; margin: 5rem;
min-height: 50rem; max-height: 100rem; grid-template-columns: repeat(4,1fr); grid-template-rows: 1fr 1fr; grid-template-areas: "card-daniel card-daniel card-jonathan card-kira" "card-jeanette card-patrick card-patrick card-kira";}
grid template areas allow me to layout my code in the grid the way I want it to look ! All I needed to do for media is to change the container abit and the layout abit ! It takes less code.
0 - Darwin Junior• 190
@djdeveloper22
Submitted
What are you most proud of, and what would you do differently next time?
Learning CSS Grid, although it was minimal, is an interesting challenge.
What challenges did you encounter, and how did you overcome them?
Apply css grid, with media queries
What specific areas of your project would you like help with?
make the website responsive, from mobile view to desktop view
Please use a style.css file next time. Would be easier for people to view for comparison. I see that you used grid. I think you could use a min-height and min-width for certain objects next time so that it will not behave weirdly. Also you might want to experiment with auto-fit and auto fill ? It might help you so that supervisor and team builder does not stretch weirdly. During transition.
Marked as helpful
1
