Skip to content
OverviewSolutions
21
Comments
3
P
Ben 🌌
@bengera

All comments

  • endriusssantos•280
    @endriusssantosSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    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

    Article Preview Component

    1
    Ben 🌌•570
    @bengeraPosted 3 months ago

    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 👍

    Marked as helpful
    1
  • Ben 🌌•570
    @bengeraPosted over 2 years ago

    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 👍

    Marked as helpful
    1
  • Ben 🌌•570
    @bengeraPosted over 2 years ago

    Hello Priya Nayak.

    Looks good!

    • I think you could wrap your whole page, give it a max-width value and center it so the page content stays together on larger screens. The same for the 'content' and 'hero__img' divs.
    • You could also add a bit of extra JavaScript so the sub menus for the mobile close (when open) and the overlay is removed when resizing the browser to a larger size.

    Cheers 👍

    Marked as helpful
    0