Wow pop-ups generator plugin X Theme layout is off

Support
#1

Hi Themeco,

Please, open this page: https://www.ponylab.studio/test-page/

And click on the first floating button on the right - ‘‘Contact us’’.

This window reflects the same code which I have for this not pop-up page: https://www.ponylab.studio/contact-us/

But you see, the pages are different.
In the first case a contact form (wpforms) is not centered, forms aren’t rounded and accordion looking strange ( too much black around and when accordion is opened, letters transitions on the edges are off)

How could we solve this issue?
Maybe there could be some CSS/javascript in help?

Thank you so much for being awesome.
Cheers,
Serge

#2

Hello There,

Thanks for writing in! I have followed the steps in order to replicate your issue. I opened the page and click “Contact Us”. And also in another tab, I visited the page directly. I am seeing exactly the same page. No difference in alignment or shape of the corners. It is displaying perfectly.

What you though as pop up is not a pop up at all. You are given an illusion that the page is a pop up but it is not. This is an animated preloader to your website generated by LoftLoader plugin. It does gives you an illusion as if the page is loading but you are actually being redirected to the other page giving delays to display the page content.

What you may have experience is because of the FVM plugin or the Fast Velocity Minify. Please clear your caches and test it again. It is also recommended that you clear your browser cache as well. You may also use private browsing mode in testing the site.

Best Regards.

#3

Hi, sorry for the confusion, little misunderstanding:
I actually meaned pop-up.
Check the screenshot: https://s.nimbus.everhelper.me/share/1384036/3wtmt5cgonq6alex2xo8

#4

Hi there,

Your CSS is overridden by this CSS

div.wpforms-container-full, div.wpforms-container-full .wpforms-form * {
    background: none;
    border: 0 none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    float: none;
    font-size: 100%;
    height: auto;
    letter-spacing: normal;
    list-style: none;
    outline: none;
    position: static;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    width: auto;
    visibility: visible;
    overflow: visible;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

As you notice, it set the margin to 0 instead of auto, hence, not centered. Unfortunately, that CSS is coming from cache file so I can’t directly check the main source. But, you may override it by adding !important to your custom CSS like this

div.wpforms-container-full {
    width: 100% !important;
    max-width: 550px  !important;
    margin-left: auto  !important;
    margin-right: auto  !important;
}

Hope this helps.

#5

Hi Rad,

thanks!
did what you wrote, the problem is still here: pop-up reflects layout not correctly (please, check my first message, the problem is not only with centering, but with the forms shape and accordion)

#6

Hi there,

I am not sure why this is happening. You used a 3rd party plugin to achieve that popup functionality which is not part of our theme out of the box and you need to contact the plugin developer for that. We do not know why the plugin does not load proper CSS code for the content inside the page.

Thank you for your understanding.

#7

Ok, thanks Christopher :frowning:

#8

Oops, sorry, just found a dublicate CSS code in ‘‘Additional CSS’’ in customizer about which Rad wrote, added !important and now forms are centered.
Thank you so much!

The same worked for the making the fields in pop-up rounded.
I’ve just added ‘’!important’’ to the CSS code.

Since this works, maybe you can suggest me how to solve the last issue with the accordion?
Basically I need a CSS which will force the black accordion container to not be so wide and to line transfer the letters inside accordion.

For comparison, I want accordion to be like here: https://www.ponylab.studio/contact-us/

Because in pop-up it’s like this: https://www.ponylab.studio/test-page/ (click on the letter icon on the right to open the pop-up with accordion)

#9

Hi there,

It’s a bit confusing about the accordion, you don’t wish to have a wider accordion, but the one you like has the wider width than the popup. And what about the line transfer?

Thanks!

#10

I mean heights.

Check the screenshots please:

Good heights: http://nimb.ws/xueyHO
Bad heights which I don’t want to have: http://nimb.ws/zXL4Sb

And the line transfer:

Everything is ok on the contacts page: http://nimb.ws/VzTgt8

Something is wrong with the line transfer on the pop-up: http://nimb.ws/WCNsxo

Thank you so much!

#11

Hi there,

Ah, you mean it shouldn’t be taller instead of wider. You shouldn’t wrap your accordion code with <pre></pre>, that’s the one causing that black area. There is no <pre></pre> code in your actual contact us page, hence, the code being uses is not really identical.

About the line transfer, it’s too caused by <pre></pre> :slight_smile:

Hope this helps.

#12

Hi!
Could it be that pop-up plugin adding this code into css?

Because I just copypasted the next shortcode from the contact us page:

    [accordion] [accordion_item title="If you're looking for a job at Ponylab"]Thank you for your interest in our company! 
Unfortunately, due to the growing number of getting a job at Ponylab requests, we’re unable to respond to every inquiry, but we’re reading and keeping track of every candidate.
If we have open vacancies and we think your skills are high, we’ll be in touch with you shortly.
If at the moment of your request we’re full – we’ll save your inquiry to our database for the future.
Thank you again and good luck![/accordion_item][/accordion]

How could I remove a <pre></pre> thing?

Thank you sooo much!

#13

Hi there,

I’m not sure how it’s added, but I may able to check it. Would you mind providing your login credentials in a secure note?

Thanks!

#14

You’re awesome!

#15

Hi there,

I do see <pre> from your pop-up content :slight_smile:

Please remove it.

Cheers!

#16

Silly me.

Thank you SOO MUCH!

Solved.

#17

You’re most welcome!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.