Change the width of the Supertime date picker input box

Are you looking to change the width of the date selector?

The default width on the .DateInput class from Supertime is set to 130px. If your store uses a bigger font size, then you may need to increase the width of this class. Here is an example for how to increase the size of this box below.

You can remove the calendar icon in the date selector by editing your theme's CSS and inserting the following code:

.DateInput {  
   width: 150px;
}

Here is an example for making all of your Supertime input fields full width:

div.supertime > div > div > select {
  width: 100% !important;
}

div.SingleDatePicker {
  display: block !important;
}

div.SingleDatePickerInput {
  display: block !important;
}

div.DateInput {  
   width: 100% !important;
}

Steps:

1. Visit your store's Theme settings.
2. Click the Actions button and select Edit Code.
   

   

3. Open your theme.scss.liquid file and scroll to the bottom of the file.
4. Paste in the code snippet displayed above.
5. Click the Save button.