Fylo Landing Page /w Two Column Layout

Community feedback

• 

  Jeuri Morel•1,385

  @JeuriMorelPosted about 1 year ago

  To prevent the Sign In text from wrapping, you can give your lis width: max-content;. If you want to learn more about how this works you can read the docs here.

  As for the img color, I don't think you can change the fill of an svg that is brought in as an img, you'd have to add the svg to the HTML. If there were only one thing in the image I would tell you to use a filter, for example: filter: invert(1); But that inverts the color for everything in it, including the logo.

  1

  ---

  

  Shaun Pour•630

  @ShaunPourPosted about 1 year ago

  @JeuriMorel Thanks. Appreciate the assist. Also, and this is a rather minor thing, really, there's a tiny bit of side scrolling over to the part to the right of the page content that's just white space. I'd like to do away with that if possible. Do you have any suggestions for this (note: this is just on the 1440px viewport)?

  0

  

  Jeuri Morel•1,385

  @JeuriMorelPosted about 1 year ago

  @DarkPhoenixNinja92 You're welcome. By the way, if you don't want to copy the logo svg directly into the HTML, you can make a copy of the logo svg file, call it something like logo-white.svg, and change the two non-white fill properties to white (there's a third that says none, not sure what that one is for.)

  Another thing, instead of using <div class="header"> or <div class="footer">, use <header>, <footer>, etc. divs have no semantic value; they're used when nothing better fits the job.

  The extra space you're talking about is caused by the form's size which is overflowing its parent. One way to fix this is to give its parent (the div with a class of "early") overflow: hidden;.

  You're still going to get a small scrollbar because of the margin on the body and because you have a number of items with a width: 100vw;. I recommend not doing that and instead giving them a width of 100%. (You'll then have to give the <div> with a class of "main" a width of 100% too.) Normally people start their CSS files with a small reset that makes styling easier and more consistent, which includes removing the default margins and paddings from most or all elements:

     *,
      *::before,
      *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
  

  If you decide to add that reset now you will then have to go and tweak things, so you might be better off just giving your body a margin of 0. (People start their CSS files with resets and then work their styles on top of it, not the other way around.)

  Marked as helpful

  0