Skip to content
OverviewSolutions
10
Comments
3
Kim Song
@CaptKraken

All comments

  • Lidia•180
    @LidiaRJSubmitted over 3 years ago

    Hello fellow devs! I just finish this project. I had been having some trouble setting the div I used to create the gradient for the gallery. I had some trouble adjusting it to the image when being responsive so I ended up applying a fixed width to the image and gradient on mobile version.

    I had also some troubles setting the gallery in a centered position. Giving it a width of 100% or 100vw would result in an overflow in X (horizontally).

    Any feedback on these problems or in general about my solution is very welcome. Thanks!

    HTML Markup, Flexbox, CSS Grid, Mobile-first workflow, JS, Sass

    3
    Kim Song•205
    @CaptKrakenPosted over 3 years ago

    i think it's the position absolute you set on the desktop gallery version. you should just have a container class to wrap both your .hero__container and .gallery__container. set max-width there. it should be easier to center.

    i see that you set exact width for the img in px, too. that would also causes problems.

    Marked as helpful
    1
  • Evan Reznicek•70
    @evanRezSubmitted over 3 years ago

    Very grateful for the feedback I received! I plan to scale the size up closer to the original at some point in the future

    FAQ Card - React, CSS

    2
    Kim Song•205
    @CaptKrakenPosted over 3 years ago

    hey good news! i think i found the problem. it's the class bgWrap. it kinda covers the whole card. adding visibility: hidden; to it should fix the problem.

    @media screen and (max-width: 768px)
.bgWrap {
    visibility: hidden;
    overflow: hidden;
}
    2
  • Kim Song•205
    @CaptKrakenPosted over 3 years ago

    just a quick tip, if you want your whole site to use just one font, you can set font-family in the body element once and be done with it because font-family is one of the properties that are inherited.

    body{ font-family: 'Poppins', sans-serif; }

    you should use css grid for this project. it's easier to build the layout with it.

    0