[scottt]

I saw how to change the size of the popup box for Terms and Conditions in the Cart (Shopping Bag), here: https://www.ecwid.com/forums/showthread.php?t=6407 (bottom of post). Unlike the post, I used it to enlarge the box.

That worked, except the box within the box -- the box that has the actual words -- is still much smaller than the outer box.

How do I make the inner box with the words larger, for easier reading and less scrolling for a customer?

Thanks in advance!

[Clara K]

Originally Posted by Scott Bryant

I saw how to change the size of the popup box for Terms and Conditions in the Cart (Shopping Bag), here: https://www.ecwid.com/forums/showthread.php?t=6407 (bottom of post). Unlike the post, I used it to enlarge the box.

That worked, except the box within the box -- the box that has the actual words -- is still much smaller than the outer box.

How do I make the inner box with the words larger, for easier reading and less scrolling for a customer?

Thanks in advance!

Hello,

Thanks a lot for contacting us!

Please use the code below to make the inner window of Terms and Conditions larger:

.ecwid-Terms-content.ecwid-Terms-content-withoutLine {
height: 342px;
width: 632px;
}

You can adjust the height and the width to the numbers you need. The code should be added to your active CSS theme in your Ecwid Control Panel > Settings > Design > CSS themes. Please remember to save the changes.

Please let us know if any further help is needed, we will be happy to answer your questions.

Thank you!

[scottt]

Thanks so much, Clara! That worked wonderfully.

Do you know if this will interfere with responsiveness to different browsers, android and iphone, tablets?

And do you happen to know a way to remove the header in the popup (that usually says "Terms and Conditions" by default)? And/or reduce the buffer that appears above and below the window you helped me enlarge?

[Clara K]

Hi Scott,

Thanks a lot for your message!

To remove the header of the popup please use this code:

div.ecwid-TermsPopup div.ecwid-popup-headLabel {
    display:none;
}

This code should also go to your active CSS theme in your Ecwid Control Panel > Settings > Design > CSS themes. Please save the changes.

As for responsiveness on mobiles, the popup will not adapt as the size of it is fixed. If you need it to be responsive, I suggest that you leave the popup in the original size. It will look like this: http://take.ms/qarZh and will adapt to the screensize. To achieve this please find and delete the following codes in your active CSS theme (Ecwid Control Panel > Settings > Design):

.ecwid-Terms-content.ecwid-Terms-content-withoutLine {
    height: 342px;
    width: 632px;
}

div.ecwid-TermsPopup div.ecwid-TermsPopup-terms {
    height: 375px;
    width: 500px;
}

div.ecwid-TermsPopup {
    margin: 50 200px;
}

Thank you!

[scottt]

Thanks so much, Clara. That definitely took away the header. Much appreciated!

I took away the code that made the popup bigger. It is indeed responsive again in android.

Question: is there a way to at least make the box longer and it still be responsive with respect to width on various screens? Right now, the popup on android only takes up half the screen's length (so it's still not all that easy to read). On PC, in Chrome, it's even worse.

Here we go. I reentered the code you mentioned above, but took away all the lines related to width. So far, it looks good.

The code looks like this:

div.ecwid-TermsPopup {
margin: 50 200px;
}
div.ecwid-TermsPopup div.ecwid-TermsPopup-terms {
height: 420px;
}
.ecwid-Terms-content.ecwid-Terms-content-withoutLine {
height: 360px;
}

[Clara K]

Hi Scott,

Thanks a lot for your message!

I am very glad you have found the solution that suits you.

Please let us know if you need any help, we will be happy to answer your questions.

Thank you!