Latest solutions
- Submitted 17 days ago
article-preview-component-master
- HTML
- CSS
- JS
i haven't found a way to change the color of icon-share.svg to white
- Submitted 18 days ago
testimonials-grid-section-main
- HTML
- CSS
i would like to know how i can improve my code, especially how can i position content in .container better without using .container-outer with flex positioning
Latest comments
- @shiroblsdSubmitted 18 days ago
- @AilaFelixxSubmitted 17 days agoWhat challenges did you encounter, and how did you overcome them?
I had a lot of trouble with the height of the main element. I had to set a fixed value to make the page look nice because otherwise, the background would only go as far as before the first section started.
Besides that, there were small details I couldn't figure out, like increasing the distance between list bullets and the start of the sentences, changing the color of the bullets, and aligning the text inside lists so that the second line starts at the same point as the first. I think this last part might be confusing. For example:
I couldn't get it to look like this:
- XXXXXX
XXXXXX
Instead, it turned out like this:(ignore the "_", it's just a space)
- __XXXXXX
XXXXXX
Anyway, I struggled, but I managed to make it work.
I’d love any advice—it's very welcome! 😊
@nilikopoPosted 17 days agoHi,
Distance between <li> and marker:
list-style-position: inside;
andtext-indent: -2rem;
are blocking the way to put distance between list bullets and start of the sentence with usingpadding-left: 2rem;
orpadding-inline-start: 2rem;
.It will also fix text aligning inside list.
u can use pseudo-element
::marker
to change the color of markerscode i used
.instructions-item::marker { color: var(--color-brown800); font-weight: 600; }
Height of main element: i removed every fixed height in media queries and in main block:
height: XXXrem
in@media
,height: 206.9rem;
inmain
. Then i removed fixed height inhtml, body
and set it toheight: auto;
and added additionalpadding-bottom: 4rem;
tomain
element.Marked as helpful1 - XXXXXX
- @SimonHicklingSubmitted 18 days ago
- @Muhammed-HamdanSubmitted 19 days agoWhat are you most proud of, and what would you do differently next time?
Used only flex box, can try recreating with grid
What challenges did you encounter, and how did you overcome them?- Child elements of flex box are not pinned to parent, used
overflow: hidden
to solve it - Used negative margin to align cart icon with text in button
Please give suggestions to better organize the CSS and make it more readable
@nilikopoPosted 19 days agou can use :root to store some known variables
:root{ /* given variables from style-guide.md */ --color-dark-cyan: hsl(158, 36%, 37%); --color-cream: hsl(30, 38%, 92%); --color-very-dark-blue: hsl(212, 21%, 14%); --color-dark-grayish-blue: hsl(228, 12%, 48%); --color-white: hsl(0, 0%, 100%); /* my own variables */ --border-radius: 10px; --padding-description: 2em; --padding-description-vertical: 1.5em; --padding-price-inline: 1.5em; --padding-button: 1em; }
0 - Child elements of flex box are not pinned to parent, used
- @ToskytdSubmitted 20 days ago
- @YT-PROGRAMMERSubmitted about 2 months ago