Latest solutions
- Submitted 25 days ago
Four cards using CSS Grid, responsive
- HTML
- CSS
Mobile version looks a bit weird and I don't know why.
- Submitted about 1 month ago
Product preview component, responsive & using Sass
#sass/scss- HTML
- CSS
Some fonts look off, how do I fix this? The colors are correct, I think, but the button is clearly different
- Submitted about 2 months ago
Contact form, pure JS (accessible with keyboard)
#accessibility- HTML
- CSS
- JS
My page's layout is either responsive or centered on desktop. For some reason the form just refuses to be centered vertically, even when I set
align-items
to center. If I make the height fixed, everything slides off screen on mobile. I chose to make it responsive but it looks bad on desktop now :/ - Submitted about 2 months ago
Recipe page, somewhat responsive
#accessibility- HTML
- CSS
How do I make it more responsive?
- Submitted about 2 months ago
Social links profile (responsive)
#accessibility- HTML
- CSS
Any feedback is appreciated :)
- Submitted about 2 months ago
Blog preview card, using flexbox (responsive)
- HTML
- CSS
I don't really know how to make the layout even more responsive. Under a certain width (<250px device width) the header and text start to break down in unexpected ways.
Latest comments
- @SimonHicklingSubmitted 25 days ago@yarsventPosted 25 days ago
Good job! It looks quite accurate to the solution!
Some things to consider:
-
The minimum screen size is too low. On laptops which have a width of 1440px the page will be displayed in mobile view.
-
The colors are not accurate. Use the style guide provided by the task to get better colors. Also, use the correct font and font weight for page elements.
0 -
- @Charles7458Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the JavaScript I wrote for this webpage.
What challenges did you encounter, and how did you overcome them?if(window.innerWidth<=430) { document.getElementById("img").src="mobile.jpg"; }
I didn't know how to change the image according to screen width. I used JavaScript to do it.
What specific areas of your project would you like help with?Any suggestions are welcome. :)
@yarsventPosted about 1 month agoGood work, it looks the same to me!
Some suggestions:
-
Use rem instead of px. There are many reasons to do this, including accessibility and responsiveness of the website
-
To change the image depending on screen width, you can use the picture element with a
media
attribute on its source elements. Like this:
<picture> <source srcset="images/image-product-desktop.jpg" media="(min-width: 40rem)"> <img src="images/image-product-mobile.jpg" alt="A picture of the perfume."> </picture>
You can read more about responsive images here and about using <picture> for responsive pages here
0 -
- @Mutairu-LawalSubmitted about 2 months ago@yarsventPosted about 2 months ago
Quite an elegant solution! I love how readable and well-organized the code is, comments are where they should be and it is easy to read. The page is also accessible and responsive, can be navigated with the keyboard. The solution lacks semantic HTML. Add sections to the form, as well as the
<main>
tag. The style is similar to the original design, but some improvements can be made, adjust width, font sizes and colors of elements. Also, the radio and checkbox buttons are too bigMarked as helpful0 - @Elilly17Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I would say i'm glad i was able to search through web documentations, and was able to get the perfect tags i didn't have proficient knowledge on.
Before next time,i'll make sure to get and learn as much knowledge on html and css codes. This would thus, help me do a quick and good project and ease my working processes.
What challenges did you encounter, and how did you overcome them?I encountered challenges in making my tables and table alignment. I overcame through critical study and practice on web documents such as w3 and MDN ( the both helped a lot). Sometimes, most times, ensure to understand every bit about a HTML and CSS code.
What specific areas of your project would you like help with?I would like help with my sizes being displayed on whether a mobile device or desktop.
@yarsventPosted about 2 months agoCongrats on finishing the challenge! This one requires styling lists and tables, and yours are well-made.
To display the website differently on mobile, you can use media queries.
@media (max-width: 450px) { .container { /* Mobile style goes here */ } }
This will make your CSS look different depending on screen size. Try to optimize it for a width of 375px (as given in the task.
To test your website on different devices, you can use the Chrome tool called device mode.
0 - @KwameSASubmitted 11 months ago@yarsventPosted about 2 months ago
Good job on finishing the challenge! I see you have implemented the media query and used Google Fonts API to style the fonts.
A few things to consider:
- Define variables for colors at the start for easier implementation. For example:
:root { --grey900: hsl(0, 0%, 8%); } body { background-color: var(--grey900); }
- Surround your container with another div, written like this:
display: flex; justify-content: center; align-items: center; height: 100vh;
to center the card horizontally and vertically.
- The box stretches on bigger desktop devices. Add a width or a max-width attribute to it.
Marked as helpful0 - P@emil-raubachSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I like how I used CSS grid and Flexbox to get the layout to look how I want as well as make the card responsive with a simple media query.
What challenges did you encounter, and how did you overcome them?Mostly minor issues or things I haven't encountered frequently like CSS properties for strikethrough text, letter-spacing, etc. Also, I haven't dealt much with svg's so adding the cart to the button was new. Using multiple images was something I have read about but not really implemented. I searched for info on the web, but not gonna lie, I used ChatGPT to get most of the information for these items.
What specific areas of your project would you like help with?Not much really. Only two minor items come to mind:
- How to center the cart svg horizontally? Can't seem to get it exactly how I want.
- When the screen changes orientation on the mobile design it looks a bit wonky and stuff spills out of the container.
@yarsventPosted about 2 months agoGood job! The code is well-organized and you got quite close to the original image. The cursor changing to a pointer is a nice touch To center the cart svg, you can put it in an <img> tag and then include in one container with the text. Then style the container like this:
display: flex; align-items: center;
Worked for me
Marked as helpful0