Noissue - Removed website-default container widths

static/scss/_base.scss

Index: static/scss/_base.scss
===================================================================
--- a/static/scss/_base.scss
+++ b/static/scss/_base.scss
@@ -26,38 +26,21 @@
   line-height: 1.5;
 }
 
 /**
  * Center content within a (responsive) fixed width
  */
 .container
 {
-  width: $phone-width;
+  width: $large-desktop-width;

[ire, 2017/10/20 07:49:39]

I think you should still use a $container-width variable. This way, it can be
changed/overridden without having to modify the .container class

   max-width: 100%;
-  margin: 0px auto;
-  padding: 0px $small-space;
-}
-
-@media(min-width: $tablet-breakpoint)
-{
-  .container
-  {
-    width: $tablet-width;
-  }
-}
-
-@media(min-width: $desktop-breakpoint)
-{
-  .container
-  {
-    width: $desktop-width;
-  }
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $small-space;
+  padding-right: $small-space;
 }
 
 @media(min-width: $large-desktop-breakpoint)

[juliandoucette, 2017/10/18 13:44:33]

I wasn't sure what to call this breakpoint. As a result, I decided to use
existing widths and change them to some sort of $container variable later if
necessary.

[ire, 2017/10/20 07:49:38]

I was wondering why this style wasn't applied, looks like you put the media
query outside the .container selector rules :P

[ire, 2017/10/20 07:49:38]

I think applying this style at $large-desktop-breakpoint is too large. 

The padding is never actually relevant because at the point at which the device
width is small enough for the .container to touch the edges, the device width is
less than $large-desktop-breakpoint

[ire, 2017/10/20 07:49:39]

I think the breakpoint name works

[juliandoucette, 2017/10/20 11:05:10]

You're right. I seem to be confused here. I was thinking about the space in
between columns being larger at large-desktop-width. But I wasn't styling that
space :D

[juliandoucette, 2017/10/20 11:05:11]

*I do this all the time D:*

[ire, 2017/10/23 11:59:37]

Haha :P

 {
-  .container
-  {
-    width: $large-desktop-width;
-  }
+  padding-left: $medium-space;
+  padding-right: $medium-space;
 }
-