This topic has 12 replies, 2 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler
Hi,
I have turned on pop up at my website but i want to modify it. I have mailchimp shortcode for email input form and a submit button only.
I tried to design the pop but couldn’t.
https://prnt.sc/iz905b
in the link above i have designed the layout in photoshop but I dont know how to do it at website.
I want responsive popup according to that design with full width of submit button and input form.
Can you please tell me how to do it or direct me in the right direction then i shall be thankful.
Hello,
Please read our documentation https://www.8theme.com/demo/docs/legenda/#!/newsletters and https://www.8theme.com/demo/docs/legenda/#!/static_blocks
Let us know if you need any further assistance.
Regards
Hi,
I have created the static block before but the problem was that the input form and submit button width was not full. I try to write something like FULL-WIDTH in css but didnt work.
and also right now i have only an image pop up, which is ok at desktop browsers but its not responsive at mobile.
please check the linked images below.
desktop version:
https://prnt.sc/j03ec6
Mobile version:
https://prnt.sc/j03emb
as you can see in the linked images that the pop up image is not full in the mobile version.
thnx
Hello,
Change background-size to contain and height to 357px.
Also, it would be better if you provide temporary wp-admin access so I can take a closer look.
Regards
Can you please tell me how i can achieve such pop up result “the layout i have sent in my first msg”
I tried to create a static block and then add an image to a row and then add a widgetized sidebar and add the widget to which i have attached mailchimp form.
when i add the static block id in the pop up section in theme option.
then when i check the popup looked horrible.
here is the screen shot.
https://prnt.sc/j0cn1h
I want the input email form goes below the picture and then the submit button goes below the input form.
as i have shown in my layout.
thanks
Hello,
To achieve the desired result you need to use also custom css code. On your site, the popup doesn’t have the form now, so I can’t inspect the form via browser console and give you appropriate css code.
Regards
Hi,
yes i have removed the form bcoz it was looking very bad.
i will attach the login credentials so that u can have a look.
please design something according to the layout i have sent so that if i want to change the pic in future then i will b able to replace the image in future with the same dimensions.
thanks a lot
I’ve made some changes, please add this custom css code in custom.css file:
#etheme-popup .vc_row {
position: absolute;
width: 100%;
right: 2%;
bottom: 0px;
}
#etheme-popup .checkbox-label {
bottom: -10px;
left: 2%;
}
How to create custom.css you can watch in this tutorial – https://www.youtube.com/watch?v=Qok2zRedRMY.
The result should be – http://prntscr.com/j0q43o
Regards
Hi,
I have added those codes to Custom.css and it has worked.
Thank you so much, i really really appreciate it.
but just one more thing, when i make the screen smaller to mobile size then still the background image is not responsive.
Hello,
You’re welcome!
Please add this code:
#etheme-popup {
background-size: contain;
}
and set Popup background color in Theme Options > Promo Popup to get – http://prntscr.com/j0qmn6
Regards
Hi,
I have added the codes and it looks perfect now.
I really appreciate your help and i am glad that i have purchased and choose Legenda theme over other themes.
Thanks a lot again.
Hello,
You’re welcome!
Thank you very much for such good thoughts! Have a nice day 🙂
Regards
You must be logged in to reply to this topic.Log in/Sign up