Skip to content
OverviewSolutions
19
Comments
2
László (Leslie) Szijj
@szloeu

All comments

  • Anahita Monezi•490
    @NallyNikSubmitted over 1 year ago

    I tried to add the little orange box with :after and :before, but it didn't work 😕...

    Any tips for improvement are very appreciated!

    Faq accordion card

    1
    László (Leslie) Szijj•190
    @szloeuPosted over 1 year ago

    Hi Anahita, you can place the orange box with absolute positioning. An element with "position: absolute;" is positioned relative to the nearest positioned ancestor.

    <div class="relative"> <div class="absolute"> </div> </div>

    div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; }

    div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }

    You can set the absolut position with left, top, right, bottom values.

    I hope you can use my advice.

    Marked as helpful
    1
  • Petros Devrikis•380
    @PetrosdevriSubmitted over 1 year ago

    This is my solution for the Article Preview Component.

    It was overall easy and enjoyable building this project, however I faced some difficulties regarding the toolbar:

    • First of all, I would be open to suggestions regarding how to add a triangle below toolbar (I know it might look easy to you but I was also busy with another crucial project so any support would be helpful to save time).
    • Secondly, let me know if there is any way to add .share-btn to the mobile responsive toolbar to match the exact pattern. It might be easy to exit the toolbar in any case, however it would be even better to match the exact pattern.

    I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

    Article Preview

    1
    László (Leslie) Szijj•190
    @szloeuPosted over 1 year ago

    Hi, first of all, congratulations on your solution. The triangle you mentioned is a square, rotated by 45 degrees and in absolute position to the rectangle of the same colour. This square will be "hidden" in the mobile version. In the mobile version the arrow is placed on the layer above the rectangle, you can set this with the "z-index" value. In my case, the rectangle disappears when the visitor either clicks on the icons or other areas of the page. I would appreciate your feedback on whether my comment was helpful.

    Marked as helpful
    0