Docs

[Lely]

Hi There,

Try this:

@media (max-width: 480px){
.esgbox-inner {
    height: 200px !important; /*Adjust to your preferred height*/
    overflow-y: scroll !important;
}
}

Hope this helps.

[wnhorne246]

Hmmm, this is not working on mobile. Here is all the custom adjustments made so far. Maybe one is conflicting. Probably the one I added! LOL. The box is still opening at 25% on mobile, and there is no scroll for overflow. Sorry to be such a pain!

@media (max-width: 480px){
.eg-ajax-target h3 {
    font-size: 26px;
	}
}

@media (max-width: 480px){
.esgbox-opened {
        top: 5% !important;
	}
}

@media (max-width: 480px){
.esgbox-inner {
    height: 200px !important; /*Adjust to your preferred height*/
    overflow-y: scroll !important;
	}
}

.esgbox-opened {
    top: 25% !important;
}
  
.esgbox-inner {
height: auto !important;
}
  
.eg-ajax-target h3 {
    margin-top: 25px;
}

.esgbox-inner p {
    margin-bottom: 0;
}

[Lely]

Hi There,

Please move this part at the bottom of all your CSS:

@media (max-width: 480px){
.esgbox-inner {
    height: 200px !important; /*Adjust to your preferred height*/
    overflow-y: scroll !important;
}
}

Like this:

@media (max-width: 480px){
.eg-ajax-target h3 {
    font-size: 26px;
	}
}

@media (max-width: 480px){
.esgbox-opened {
        top: 5% !important;
	}
}

.esgbox-opened {
    top: 25% !important;
}
  
.esgbox-inner {
height: auto !important;
}
  
.eg-ajax-target h3 {
    margin-top: 25px;
}

.esgbox-inner p {
    margin-bottom: 0;
}
@media (max-width: 480px){
.esgbox-inner {
    height: 200px !important; /*Adjust to your preferred height*/
    overflow-y: scroll !important;
	}
}

Hope this helps.

[wnhorne246]

Yes, that added the right everything on mobile, but now I see a big flaw in all of this. By setting a top % on anything, means when you scroll down the page on your phone, when you open a new box further down the long! page, it opens up at the top again so you have to scroll back up to see it.

I have a plugin called FooBox that’s supposed to be fully responsive. That’s what they claim at least. I wonder if it can be called instead of the FancyBox?

Around we go! Weeeeeeeee

[Lely]

Hi There,

Unfortunately, that would be the downside to this customization. You may choose to implement this update on desktop view only. As noted earlier, default setup with max-height is the most ideal setting to handle long content inside the popup.

You may ask the developer of Foobox for possible integration. They can give you a better guide for the implementation if it’s possible.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts