diff --git a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
index 263a0ea0..021a8ac6 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
@@ -24,6 +24,7 @@ import {
   Switch,
   Tooltip,
   UnorderedList,
+  useBreakpointValue,
   useClipboard,
   useToast,
 } from "@chakra-ui/react";
@@ -78,6 +79,8 @@ function OutfitControls({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const toast = React.useMemo(() => _toast, []);
 
+  const speciesColorPickerSize = useBreakpointValue({ base: "sm", md: "md" });
+
   const onSpeciesColorChange = React.useCallback(
     (species, color, isValid, closestPose) => {
       if (isValid) {
@@ -208,6 +211,7 @@ function OutfitControls({
             {outfitState.speciesId && outfitState.colorId && (
               <Flex
                 gridArea="picker"
+                align="center"
                 justify="center"
                 onClick={maybeUnlockFocus}
               >
@@ -223,6 +227,7 @@ function OutfitControls({
                       idealPose={outfitState.pose}
                       onChange={onSpeciesColorChange}
                       stateMustAlwaysBeValid
+                      size={speciesColorPickerSize}
                       speciesTestId="wardrobe-species-picker"
                       colorTestId="wardrobe-color-picker"
                     />