Skip to content
OverviewSolutions
62
Comments
82

Byron

@byronbyronUnited Kingdom2,290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Byron•2,290
    @byronbyron

    @DanK1368 Hia mate.

    Try position: fixed; instead of position: absolute;, to fix the scrolling issue.

    @media screen and (max-width: 670px) {
    .ggprRt {
        /* position: absolute; */
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        transform: translateX(110%);
        opacity: 0;
    }
}
    Marked as helpful
  • Byron•2,290
    @byronbyron

    Hi @Chillidot

    If you remove the height: auto; from the your style.css below, that should fix it in safari!

    /** Circle **/
svg{
    max-width: 100%;
    /* height: auto; */
}

    Hope that helps!

    Marked as helpful
  • Byron•2,290
    @byronbyron

    Hi @ujwalvinay

    You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

    <div class="img-wrapper">
    <img src="images/image-equilibrium.jpg" alt="image" id="banner">
</div>

    .img-wrapper {
    position: relative;
}

.img-wrapper::before {
    content: '';
    background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
    display: block;
    border-radius: 1.2rem;
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    left: 5%;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.img-wrapper:hover::before {
    visibility: visible;
    opacity: 1;
}

    Hope that helps! 👍

    Marked as helpful
  • Byron•2,290
    @byronbyron

    Hi @MikeAngel2

    You should be able to center the second card by updating your index.js to set display flex instead of block.

    $(".Thanks").css('display','flex');

    This bit of CSS should help to center the text on the second card as well

    .Thanks {
    align-items: center;
    text-align: center;
}

    Hope that helps!

    Marked as helpful
  • Byron•2,290
    @byronbyron

    @Abrosss Looks good!

    Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.

    Few html/accessibility issues:

    Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)

    Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)

    Marked as helpful
  • Byron•2,290
    @byronbyron

    @Ganesh-Rathor To style range input on chrome/brave (webkit) you can use:

    input[type=range]::-webkit-slider-runnable-track {}
input[type=range]::-webkit-slider-thumb {}
    Marked as helpful
View more comments