huddle landing page curved SCSS & Flexbox

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I have a couple of suggestions. One, your CSS code is very difficult to read because there is no separation between the tags. Separate your CSS in to sections with a comment like /********* Header Styles ********/. Also I like to leave a space after everyone of the style tags. Second, you don't have to chain the Ids and Classes together like your code. #main-footer .container .flex-footer .content-right .newsletter input Just using .newsletter input will work fine. It will save you a lot of typing.

  For the ::before and ::after pseudo-elements, you did them the right way, your top and bottom pixels amount were off. I lowered them about 20 pixels and they looked okay. An easy way to get them in the right positions is to highlight them in Chrome DevTools and hover over the top and bottom attributes. A double-sided arrow will show up and you can use your mouse to move them up or down. Just make sure to copy the amount into your CSS code.

  Hope this helps.

  Marked as helpful

  0

  ---

  

  Mounir Moutawakil•420

  @mounir-m4Posted almost 3 years ago

  @brodiewebdt thank you so David! but I did mention that I've made this template with SASS not CSS that's why it looked unreadable, take a look at scss folder and you'll see. and about the pseudo-elements...I just thought that there's a better way to do it and yes I did a lot of testing to find the right position in dev tools.

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  My bad. I just looked at your SASS file and it is very readable.

  1