Added product name to homepage & thumbnail sizing #2232
Conversation
* Related to #2137 - moved customer support to its own accordion
mmmavis
changed the title
|
This is looking great! Feels so nice and responsive! Few things, let me know if you have any questions. White cutout
I noticed this white cutout is missing. Screen cap from PR Screen cap from prod: Remove white space at bottom
Screen cap from PR: Suggested comp: Make even more responsive
As the screen width narrrows, it goes from 5 across, to 3, and then to 2. Would it be possible for it to go from 5 across, to 4, to 3 and then to 2? Because just before it goes from 5 to 3, the images are quite small. I think added 4 across will help with this. |
|
@kristinashu PR updated! |
| @@ -1,4 +1,8 @@ | |||
| #pni-home { | |||
| .main-content.pb-5 { | |||
| padding-bottom: 0 !important; | |||
There was a problem hiding this comment.
Let's not do this. If we need padding-bottom 0, then either we set pb-0 as a bootstrap class instead of pb-5, or we add a different-named class that we can use to set up a more-specific CSS rule (so that it wins from the general pb-5) that effects the override.
There was a problem hiding this comment.
(this is also why we had those classes as explicit strings everywhere: you can't easily tweak individual class strings if they're pulled from a template variable)
|
My feedback above all looks fixed. But looks like a bunch of vertical space was added between the Screen cap from PR: |
|
PR updated! |
|
Did we strip the white space on the sides intentionally? The homepage grid feels super crowded now
|
|
Let's see how wide desktop view looks on mofostaging with the real images. Shouldn't be related but noticing the likelihood to buy filter isn't working properly (showing both thumbs up and down even though I've selected only up. Is that from this PR or a different one?
|
Might be me. I will check in a bit. |
| @@ -64,6 +64,11 @@ | |||
| padding: $padding-y $padding-x; | |||
| width: calc((100% - #{$row-total-gutter-width}) / #{$items-per-row}); | |||
|
|
|||
| &.d-flex.d-none { | |||
Closes #2229 and #2124
@Pomax I added a few wrappers so it will be a lot easier if you review the code without whitespace changes: https://github.com/mozilla/foundation.mozilla.org/pull/2232/files?w=1