Calculator on Mobile view

Ask the Community General Questions
1

Hello, I’m having issues with the calculator on my site. the desktop version works fine and looks great.

but when it’s viewed in the mobile version, its appears wider than the mobile screen, which causes horizontal scrolling. im able to drag the contact left and right. Any suggestions?

Thank you,

3

Hi there, @David57 :waving_hand:

Could you please send me a link to the page where your widget is installed? I’ll be happy to check it :slightly_smiling_face:

4

Hi @Max yes of course. Here is the link

5

Thank you!

This issue occurs because of the iframes used on the Wix platform. To fix it, please reinstall the widget avoiding iframes following one of these methods:


Give it a try and let me know if it helped :slightly_smiling_face:

6

Thank @Max that worked! Is there a way to manipulate the text size and size of the entry boxes?

would like to make the boxes slightly smaller at the moment they seem large in the mobile version. Thank you again.

7

Just to confirm, you’d like to change the container size of the Email and Zip Code fields along with the input text and placeholders size, right?

8

@Max correct.

9

This CSS code will do the trick:

.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) {
  width: 100% !important;
  min-height: 108px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) .es-text-control-base-placeholder,
.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) .es-text-control-base-inner {
  font-size: 24px !important;
  line-height: 1.35 !important;
}

.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) .es-text-control-base-placeholder {
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) .es-text-control-base-input-wrapper,
.es-text-control-base-container:not(.es-fields-number):not(.es-fields-slider-number) .es-text-control-base-inner {
  height: auto !important;
  overflow: visible !important;
}

.es-text-control-base-container.es-long-text-control,
.es-text-control-base-container.es-fields-long-text {
  min-height: 120px !important;
}

Give it a try and let me know if it helped :slightly_smiling_face: