Responsive landing page with HTML and CSS using Bootstrap

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi HaYeong, good job completing this website layout! 🙂 I'll try to answer some of your questions:

  1. About the triangle, I used a pseudo element in my solution, like this:

     nav::before {
         content: "";
         margin-left: auto;
         position: relative;
         top: -1.5rem;
         border-width: 0 0 1.5rem 1.5rem;
         border-style: solid;
         border-color: var(--clr-white) transparent;
         display: block;
         width: 0;
       }
     

  2. About the styles being gone when setting a larger font size, are you referring to going from mobile to desktop view and having the styles overwritten? I tried checking out your code to see where the media queries are, but I couldn't find any; I just see that you have a separate mobile and desktop stylesheet. In any case, I think as long as you specify the desktop styles in the media query (or mobile styles if you had a desktop-first approach), then that should be OK.

  3. About paddings and margins, I notice you have a fairly large padding in the hero section! I generally don't suggest using large paddings as that could produce issues at smaller breakpoints. For me, I used responsive width properties instead to keep the content centered with enough space around the text.

  Feel free to check out my solution here: https://www.frontendmentor.io/solutions/responsive-landing-page-with-cube-css-zJrpzUIQqd

  12

  Marked as helpful