Fylo-Lading-Page-TwoColumns

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted almost 3 years ago

  Hey @DannyMolina - nice work here! The page looks good. I use a few tricks to deal with the issues on your page, it's worth finding an approach that works on these points as they come up a lot! Here's what I would to do improve things:

  1. Prevent things spreading out too wide on large screens.

  There are many ways to do this but I set a grid on the body element, with three columns, as using a class selector as follows:

  .center-content {
  	display: grid;
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
  }
  
  .center-content > *  {
  	grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

  The second part positions all direct children of the body in this nicely sized middle column. In my case, mostly, my header, main, and footer the middle column, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this constraint if you need to.

  Other people use container classes to do the same thing. This article has a good run down of alternative approaches https://css-tricks.com/the-inside-problem/ You will note I am actually using the approach the author doesn't like! I am thinking of switching to the container approach.

  Either way it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  2. Change the alignment of the buttons.

  This can be done with flexbox. Firstly I would wrap the input and button in a div. And set the following on the div:

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  

  I would then apply the following to the input:

  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 70%
  

  This combined with the flex-wrap on the parent means that the input will grow and shrink, but when the width hits 70% the button will wrap below. Then on the button add:

  flex-grow: 1;
  min-inline-size: 20rem;
  

  This means the button will not be less than the size set (you could also use fit-content if you are feeling fancy!) I think that should work. You may need to play around with the min-inline sizes.

  3. Lastly you should add accessible name to the links listed in the report. This is probably most easily done by using aria-label. You can't have empty links with no accessible name as screen readers won't announce where the link will go.

  Hope this helps!

  Cheers

  Dave

  PS If that flexbox stuff is a bit tricky, you could always use a media query and just change the flex-direction from row to column at narrow widths.

  00