I would change the way I positioned my sharing card and the triangle below
What challenges did you encounter, and how did you overcome them?I had difficulty making the response
What specific areas of your project would you like help with?I need help with the responsive part, because as soon as the share button is clicked, depending on the screen size, the share card is poorly positioned
Hello endriusssantos.
To position the share card so it doesn't move when the screen or browser size changes, you can position the share-btn relative to something else.
For example, create a container around the share-btn , give the container relative positioning and put the share card (and triangle) inside the container.
This way, when the screen changes, the share card will stay relative to the container class.
HTML
<div class="button-container">
<div id="message" class="message how show">
<p class="text">share</p>
<a class="icon" href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-pinterest"></i></a>
<div id="triangle" class="triangle show"></div>
</div>
<button id="button" class="share-btn"><img src="./src/images/icon-share.svg" alt="share icon"
class="icon-btn"></button>
</div>
</div>
CSS
/*Added*/
.button-container {
position: relative;
}
.container .card .content .message.show {
opacity: 1;
/*Added*/
top: -74px;
left: -109px;
}
.triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid hsl(217, 19%, 35%);
position: absolute;
opacity: 0;
/*Changed*/
top: 53px;
right: 114px;
}
Hope this helps 👍
Hi Jack. Nice work!
A few little things I noticed that you can change / add for slight improvements.
Add border: 1px solid to your more button so that when you hover
it doesn't move your content. I think the other buttons and links have a similar
problem because the weight is changing on hover.
Wrap your whole page, give it a max-width value and center it so the page content stays together on larger screens.
Add a gap property to your flex element 'item__info' so the links are a bit more spaced out.
You could remove the position:absolute on the down and up icons so they don't overlap the company and features links when resizing to a smaller screen. (for desktop menu)
Giving your 'item-info' element a min-width on desktop stops the links from overflowing out of the div when you resize.
Add a bit of JavaScript so the mobile menu and overlay is removed when resizing the browser to a larger (desktop) size.
Cheers 👍
Hello Priya Nayak.
Looks good!
max-width value and center it so the page content stays together on larger screens. The same for the 'content' and 'hero__img' divs.Cheers 👍