All comments

• 

  Lidia• 180

  @LidiaRJ

  Submitted almost 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

  2

  0

  

  Kim Song• 205

  @CaptKraken

  Posted almost 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

  @evanRez

  Submitted almost 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

  1

  0

  

  Kim Song• 205

  @CaptKraken

  Posted almost 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

  This comment has received 2 repliesShow
• 

  negative843• 90

  @negative843

  Submitted about 3 years ago

  i know its not perfect.please suggest me changes

  

  Four card feature section using html and css

  1

  1

  0

  

  Kim Song• 205

  @CaptKraken

  Posted about 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