I was not able to make the "bg-pattern-quotation.svg" on the purple card responsive enough. I would appreciate any help to fix that.
I still need to know more about responsiveness.
While the project works well on mobile and desktop, I want to know if there are even cleaner ways to write my responsive CSS or better handle spacing and sizing.
I used a basic media query, but I would like to learn how to make it even more fluid across a wider range of screen sizes (like tablets).
i made the grid design correctly , but the text of kira looks bad ; it does not take the whole cell ,so next time i would maybe increase the font size
What challenges did you encounter, and how did you overcome them?placing the quote images was a bit difficult but with absolute positionning everything went fine
What specific areas of your project would you like help with?any tips are welcome :)
.
Nice solution.
proud that its somewhat responsive
What challenges did you encounter, and how did you overcome them?Originally I had the add to cart button looking perfect and at some point I did something that messed it up I spent over an hour trying to figure it out and could not find the problem. I started this project with mobile first this was my first time using a media query and it works somewhat its responsive but you'll see that when you open it to a bigger screen size it doesn't look accurate, I was stuck with trying to make the main image look like it is supposed to
What specific areas of your project would you like help with?using media queries and making everything transition smoothly like it should
Great job on completing the solution! However, there are a few fixes that could enhance your solution.
Fix Duplicate <html> Tag: Remove the second <html> tag.
Improve Alt Text for Images: Update the alt text for images to be more descriptive, e.g., "Gabrielle Essence Eau De Parfum bottle" instead of just "image of perfume".
Remove <br> Tags: Instead of using <br> for line breaks in text, use CSS to manage wrapping and spacing. For example, replace: '<h1>Gabrielle Essence<br> Eau De Parfum</h1>' With: '<h1>Gabrielle Essence Eau De Parfum</h1>'
Improving Button Structure: Consider using <span> or a semantic approach for emphasis (e.g., <span>Add to Cart</span>), instead of using <b> inside the button. Also, make the cart icon hidden from screen readers by adding aria- hidden="true".
CSS:
Fix Empty font-size in HTML: In your html selector, set a proper font-size, e.g.: html { font-size: 16px; }
Units Missing (Font Sizes): Add missing units like rem or px to font-size values. Example: p { font-size: 0.875rem; }
Remove Double Semicolons: Remove any double semicolons (;;) in your code.
Avoid Repetitive Flexbox Properties: Avoid duplicating the same flexbox properties in both the main CSS and the media query. Clean up your code by consolidating it.
Button Layout: Use display: flex inside the button to align items (icon and text): .add-to-cart { display: flex; justify-content: center; align-items: center; gap: 1rem; }
Refine Section and Small Margins: Review margin/padding for small screen sizes and ensure there’s no awkward text alignment.
Improve Media Query: Enhance your media query to adjust not only the flex-direction but also other properties (like margins, font sizes, and padding) for a fully responsive layout.
Nice solution
Did it in a short span of time.
Very good solution.
Nice solution. However, I noticed that the shadow does not grow or expand when the card is hovered. I'm unable to view your code, so I suggest you check this example below to compare with what you have. I hope it helps:
''' .card:hover{ box-shadow: 16px 16px var(--Gray-950);
}
.card:hover h1{ color: var(--Yellow); } '''
