Hi,
Managed to do it on my own with some custom CSS. I moved the “X” button inside the window and downsized it a bit.
I also added a query for the responsive design so it is mobile friendly.
In case someone from the community wants it, here it is:
.model-popup-btn {
font-family: 'Raleway';
cursor: pointer;
}
.mega-model-popup img {
max-width: 70%;
padding: 10px 0 0 2px;
}
.b-close {
right: 4px;
top: -2px;
}
@media only screen and (max-width: 768px) {
.mega-model-popup img {
max-width: 60%;
padding: 9px 0 0 2px;
}}
@media only screen and (max-width: 768px) {
.b-close {
display: inline-block !important;
right: 0px;
top: 0px;
}}
@media only screen and (max-width: 768px) {
.mega-model-popup h2 {
margin: 0 !important;
font-size: 17px !important;
text-align: left !important;
}}
Meanwhile, I launched the website. Go ahead and check how the custom CSS looks and behaves. Click on one of the READ MORE buttons in the “Massages” sections.
https://www.mobilemassage.gr/
Cheers to all!
-
This reply was modified 7 years, 10 months ago by
Manou Allou. Reason: Added a link to the website to see the change live
Hi! Thanks for the solution and I will fix It in new version.
I just hide the X button in mobile but It looks more better inside modal popup.
It will look more better if X button show outside the Modal popup for Desktop. http://prntscr.com/jysgyj
Cheers
Nasir
Hi Nasir,
Glad I could help. Yes indeed, when in desktop the ‘X’ looks nicer outside the box.
Waiting for your updated version and keep up the good work. Amazing plugin!
Best regards,
Manou