@gautam32b7Submitted 9 months ago
What specific areas of your project would you like help with?
Hi there!
I am unable to implement the shared container on a mobile device. I would appreciate it if anyone could help me 🙏
keltiek
@keltiekAll comments
- @keltiekPosted 7 months ago
Just some generic comments, I hope it can still help for directions... For mobile design, you can change with the media query the top and right position of the container, and with padding make it the same size as the bottom of the card. Then use Z index to keep the Share button above it.
0 - @zetmosoma10Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Im proud of Finally Finishing this Project and next Time i will try to Manage time when building this Project. This Project took me more time than i expected.
What challenges did you encounter, and how did you overcome them?Building Button Component was more challenging - I had to build a Button component that either return a link instance or a button instance.
What specific areas of your project would you like help with?I Need Help with the Issue of Horizontal scrolling, i don't know what's going on here. I have been handling this horizontal scrolling good when using CSS or Sass (by using margin: 0 auto, max-width: 1110px, width: 90%) but when it comes to TailwindCSS it just not coming the way i want.
Any Feedback will be Appreciated
@keltiekPosted 8 months agoI think the issue with horizontal scrolling could be from "herobgImg" & "featureBgIcon" absolute position with:
right-[-25%]
left-[-30%]
I'm not so advanced, so I may be wrong.
1 - @navkngSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I did it in record time.
What challenges did you encounter, and how did you overcome them?defining custom colors, shadowbox and font in tailwind
What specific areas of your project would you like help with?well criticism is always welcomed
@keltiekPosted 8 months agoIt looks great! One minor thing, I believe you should use <h1> instead of <h3>. Keep it up!
0 - @vicky2805vkySubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
this is my first project which I only created using an image not figma.
What challenges did you encounter, and how did you overcome them?as I use image I have some problems in finding pixel measurements I think my website is almost similar to the design but it is so small.
What specific areas of your project would you like help with?someone please tell me how do you deal with this measurement problem. as you can see my website look similar but it is small
@keltiekPosted 8 months agoI'm not sure if it will help you, but I'm using "Pixel Perfect Pro" extension on Chrome, and it makes it easier to follow the design without figma.
0 - @ELMudyrSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I was able to get an approximate sizing of the cards resolution. I would in the future reduce the ammount of styling code and build starting from small media screens to have a better responivity.
What specific areas of your project would you like help with?I would like to know why my grid elements do not stack on smaller screens knowing that I have specified the collumns to 1 col on below medium screens. Also I was unable to set the quotation image to absolute using tailwind, I declaired the parent container as relative, I had to move the image using CSS.
@keltiekPosted 8 months agoHello,
I don't see in your code the default with grid-cols-1.
You could have for example something like: class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
Then on each card you have to be careful to set the correct spanning and row/col start depending on the media queries. For Kira, I have something like: class="md:col-start-2 md:row-span-2 md:row-start-2 lg:col-start-4 lg:row-start-1"
For the quotation image I did something like: bg-[url('./images/bg-pattern-quotation.svg')] bg-top bg-no-repeat [background-position-x:82%]
There is a bg-top-right available but then there is no space on the right of the card. I used a custom property to set "background-position-x".
I hope this is helpful, as I'm not very experienced in CSS / Tailwind.
Good luck! :)
Marked as helpful1 - @sipanahmadSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of understanding the grid layout concepts.
What challenges did you encounter, and how did you overcome them?I'm really wanna use grid in my next projects.
What specific areas of your project would you like help with?I'd like to say how the layout organize it's just such a wow thing and it's modern design.
@keltiekPosted 8 months agoImpressive css skills, it looks very clean with the use of grid-template-areas!
1 - @RyanFoersterSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I managed to produce a fairly decent result, despite the fact that responsive is still a problem for some dimensions.
What challenges did you encounter, and how did you overcome them?The main challenge remains responsive, I feel that I am not far from the result but I still lack some knowledge.
What specific areas of your project would you like help with?I'd like some help to find out if I should change the height and width of the containers, body, etc. using max or min and also for the font size, I understand that I have to use the clamp() function but I don't really understand how it works.
@keltiekPosted 8 months agoResult looks quite good, keep it up! I think you could try to use fixed max-width values depending on the media queries.
1 - @carolsemeaoSubmitted almost 2 years agoWhat are you most proud of, and what would you do differently next time?
I redone this challenge after a year of being a WordPress developer intern. I am impressed on how many things I changed compared to the first attempt. For the next time, I'd probably choose better CSS class names
What challenges did you encounter, and how did you overcome them?The only challenge was to create mixins in SCSS for the media queries
What specific areas of your project would you like help with?None :)
@keltiekPosted 8 months agoThe desktop version looks great!
I think you could have use <picture> instead of using CSS hidden to manage mobile and desktop images.
I did the following:
<picture> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 768px)" /> <img src="./images/image-product-mobile.jpg" alt="perfume" /> </picture>Marked as helpful1 - @keltiekSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Doesn't look as bad as I thought:)
What challenges did you encounter, and how did you overcome them?I don't know enough about CSS and Tailwind.
I have the feeling I'm just doing workarounds on top of workarounds.
If someone with experience in Tailwind and CSS could give me some directions, I would be forever grateful ;)
What specific areas of your project would you like help with?For the table at the bottom, I would think would be perfect, but somehow I guess that's not valid. If I do the border myself, I couldn't manage to make it longer than the text.
I don't think this is the right way:
``
Also I guess there is probably a better way to have the right amount of space between the columns content without using fixed values...
For the bullet list, I couldn't manage to have the bullet aligned in the middle vertically, and again I feel my div inside is just a workaround to add some left padding...
`
Total: Approximately 10 minutes...`
I would love to get some feedback!
ps: everything is in index.html, I'm using Tailwind CDN and set the config directly there.
@keltiekPosted 8 months agoLooks like something was off with code snippets in my previous comment. Anyway, I corrected the nutrition table at the bottom (with w-full mainly). So just missing bullet alignments... and better organisation I'm sure!
0 - @SS-ekowSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I was able to meet the design guidelines
What challenges did you encounter, and how did you overcome them?figuring our dimensions without the figma design
What specific areas of your project would you like help with?none
@keltiekPosted 8 months agoI'm not sure if it will help you, but I'm using "Pixel Perfect Pro" extension on Chrome, and it makes it easier to follow the design without figma.
Marked as helpful1 - @fishfish1233Submitted 8 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?...
@keltiekPosted 8 months agoLooks good! Keep it up! You might use <q> tag for the quote.
Marked as helpful0 - @zadalkher9Submitted 8 months ago@keltiekPosted 8 months ago
It looks good but I think you miss the hover effect. Also, I believe you should use <h1> instead of <h2>
Marked as helpful0
