ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• February 29, 2016 at 9:17 pm #252777
  tylergibbons93

  Member

  Post count: 81

  Hello,

  I was wondering if there is a code I can put in to make the modal wider? Right now on my site, https://www.engagingpapers.com/shop/charlotteinvitation/, you can see its the standard modal size. is there a way to make it say, double the width on desktops?

  March 1, 2016 at 4:17 am #252818
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Where are you referring to modal at this page https://www.engagingpapers.com/shop/charlotteinvitation/?
  Thanks
  Mohammad

  March 1, 2016 at 4:18 am #252820
  tylergibbons93

  Member

  Post count: 81

  click an option, then select design and order

  March 1, 2016 at 6:03 am #252838
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  @media screen and (min-width: 1024px) {
  .modal.in .modal-dialog {
      max-width: 1000px !important;
      width: 1000px !important;
  }
  }

  Thanks
  Mohammd

  March 1, 2016 at 8:16 pm #253053
  tylergibbons93

  Member

  Post count: 81

  hmmmm when you are here, https://www.engagingpapers.com/engagingpapersphase2/shop/ceciliainvitation/ and do the same click a option then design and order, it didnt do anything. I pasted in the code.

  March 1, 2016 at 9:00 pm #253057
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  This css isn’t being picked up so I’m guessing there’s an error somewhere else in your custom css. Try moving it to the top of your css

  – Kyle

  March 4, 2016 at 9:53 pm #253691
  tylergibbons93

  Member

  Post count: 81

  This reply has been marked as private.
  March 4, 2016 at 9:54 pm #253692
  tylergibbons93

  Member

  Post count: 81

  This reply has been marked as private.
  March 4, 2016 at 9:56 pm #253693
  tylergibbons93

  Member

  Post count: 81

  This reply has been marked as private.
  March 5, 2016 at 11:32 am #253717
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Did it work?

  – Kyle

  March 5, 2016 at 7:18 pm #253732
  tylergibbons93

  Member

  Post count: 81

  It does not work. you can see it here: https://www.engagingpapers.com/engagingpapersphase2/shop/ceciliainvitation/

  March 7, 2016 at 3:32 pm #253944
  David Martin – Support

  Moderator

  Post count: 20834

  Please test this:

  @media only screen and (max-width: 767px) {
  	.modal-dialog {
  	    max-width: 630px;
  	    width: 50%;
  	}
  }
  
  @media only screen and (max-width: 479px) {
  	.modal-dialog {
  	    max-width: 630px;
  	    width: 50%;
  	}
  }
  
  .modal-dialog {
      max-width: 1120px;
      width: 100%;
  }

  Thanks.

  March 8, 2016 at 7:01 pm #254238
  tylergibbons93

  Member

  Post count: 81

  This reply has been marked as private.
  March 9, 2016 at 7:58 pm #254523
  David Martin – Support

  Moderator

  Post count: 20834

  Yes, that is because of the media queries that you need to remove.

  Ex, this needs to be removed as it sets a constant width:

  @media screen and (max-width: 1024px) {
  .modal.in .modal-dialog {
      max-width: 1000px!important;
      width: 1000px!important;
  }
  }

  Thanks.

  March 10, 2016 at 5:05 pm #254780
  tylergibbons93

  Member

  Post count: 81

  great thank you!

• Back to forum

  Posted in: Atelier