Submitted 17 days ago

Transform Your Room Responsive Flexbox CSS

Craig Wolfe•190

@craigwolfe

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

The footer section in the mobile layout and using JavaScript to display the social media icons.

What challenges did you encounter, and how did you overcome them?

I was unable to create the small triangle artifact under the social media icons in the desktop layout.

What specific areas of your project would you like help with?

The small triangle point on the social media icons in the desktop layout.

Community feedback

Aydan•680

@AydanKaraPosted 17 days ago

Great work @craigwolfe. It´s look amazing.

For the small triangle point on the social media icons I used ::after pseudo-element to insert content after the content of an element.

Here's what it would look like for you:

.share-shape-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top-color: #48556A;
    border-bottom: 0;
    margin-left: -12px;
    margin-bottom: -12px;
}

You can also change the left positon at the .share-shape-container to center the container

.share-shape-container {
    ...
    left: 225px;
}

I hope you find these improvements useful. I wish you a pleasant day.

Marked as helpful

Craig Wolfe•190

@craigwolfePosted 15 days ago

@AydanKara Thanks for the help. This was perfect.

P
Andrés R.W.•380
@amporabipoPosted 17 days ago
Hello brother, look, the only thing you have to do is 1. Change the background of the main container 2. and give it flex justify center and items center
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord