All comments

endriusssantos• 210

@endriusssantos

Submitted 29 days 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

Ben 🌌• 570

@bengera

Posted 28 days 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

Jack• 490
@Jack-WebDev
Submitted over 2 years ago
Any advice will be great :)
Intro Section with dropdown navigation
1
P
Ben 🌌• 570
@bengera
Posted 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
Priya Nayak• 130
@priya180975
Submitted over 2 years ago
Any suggestion to improve would be appreciated.
Responsive intro section using css grid and flexbox
1
P
Ben 🌌• 570
@bengera
Posted 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

Ben 🌌

All comments

Article Preview Component

Intro Section with dropdown navigation

Responsive intro section using css grid and flexbox