@MARCUS-IMPERATORSubmitted 7 months ago
What specific areas of your project would you like help with?
Making a website responsive
Nadir Bousalah
@Medido1All comments
- @Medido1Posted 7 months ago
for the mobile version : in your Html try to the first img ine one div and the rest of the page in a different one so you can apply padding on the content alone and the img would take the whole width of the screen and .container { width: 100vw; } this is before the media queries ! i hope this helps
Marked as helpful1 - @Medido1Submitted 7 months ago@Medido1Posted 7 months ago
first i declared an array const month31days = [1, 3, 5, 7, 8, 10, 12]; every number represents a month that is 31days long then in my checkValidity Function i used a condition to check: if the current day > 30 and the current month is not included in the array it will be invalid. else if (!month31days.includes(month) && day > 30 && month > 1 && month < 12) { isValid = false;
0 - @AntonvasilacheSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- Used grids effectively to create the desired layout
- Used background pattern and configured it as per the design
- Used css classes to differentiate between similar elements with different properties
- Took a while to figure out the proper colours for each paragraph.
- Matching the height of the last testimonial with the other ones - did it using a flex container.
- Using the background pattern on the first testimonial - managed to position it using percentage.
- Restyling the testimonial containers for mobile screens - needed resetting the columns to 1, but also the positioning, like so
What specific areas of your project would you like help with?.testimonial--large-2 { grid-column: 1; }Maybe a more reliable way of styling box shadows.
@Medido1Posted 8 months agogreat idea to have mulitple break points!! i'll try to apply that to my own challenge
1 - @loggerproSubmitted 8 months ago
- @hamody-74Submitted 9 months agoWhat are you most proud of, and what would you do differently next time? What challenges did you encounter, and how did you overcome them? What specific areas of your project would you like help with?
- @vonsackerSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how the result looks like the designs.
What challenges did you encounter, and how did you overcome them?I had some issues with making the page responsive in the right way. I learned a bit about media queries and how to use them and fixed it.
What specific areas of your project would you like help with?maybe my code could be more redundant.
- @saseozSubmitted 8 months ago@Medido1Posted 8 months ago
nice work!! you can center the card in the screen and fix the footer at the bottom of the page using flex-box
1 - @Prantaneel-PeguSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Making the site responsive on all screens, from desktops to small mobiles. It even supports mobiles in landscape mode. Also, I wrote the code in a very clean and organized way.
What challenges did you encounter, and how did you overcome them?Not any really.
What specific areas of your project would you like help with?How can I implement responsive typography page-wide? I would like some links to guides on this topic.
@Medido1Posted 8 months agoGreat work!! if you look at the design of the active state, you can see that there is an increase in the box shadow of the container when hoverd over, you should consider adding that to your code
0 - @krishnatalekarSubmitted 8 months ago@Medido1Posted 8 months ago
Great work!! but i think it's recomanded to write the CSS on it's own seperate file, it offer much better readability than being in the header of the Html document
Marked as helpful1 - @AkashSinha96Submitted over 1 year ago@Medido1Posted over 1 year ago
Great work !! Try to add the following code to center your card horizontally:
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
Marked as helpful1
