Topic: Temporary section to hover on top of current Home page | Themeco Community

Tagged: x

← 1 2 3 →

Author

Posts
March 17, 2017 at 2:54 pm #1411406

Joao
Moderator

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

March 17, 2017 at 3:55 pm #1411461

iamwithU
Participant

This reply has been marked as private.

March 17, 2017 at 4:03 pm #1411469

iamwithU
Participant

Could this strange phenomenon (of repeated closure of a modal) I see on my mobile screen due to the fact that I’m amending my website on my laptop at the same time?

Should the web page on my mobile say “under maintenance” if I’m working on it?

March 18, 2017 at 3:22 pm #1412283

Rad
Moderator

Hi there,

Please try toggling off the “Before user exits”. Though, I can’t replicate this on my end, I’m on my iPad too, what browser and version? And please provide your FTP login credentials as well, I might able to get some detail if there is any corrupt setting.

Thanks!

March 19, 2017 at 2:11 am #1412540

iamwithU
Participant

Tks Rad. I was able to stop the repeated closure of the modal popup after I turned off the “Before user exits”. I also turned off “Launch after content”.

Any advice on:

a) the font size of heading is not responsive text. So the design looks great
on desktop, but when applied to mobile screen, the headline shrinks.

c) I have set a modal to appear after 7 seconds. But I also want it to appear immediately if an user scrolls to the bottom of the page or exits the page or quits the website. I selected “Yes” for “Before user exits” as well as “After scroll to certain ID/class” and stated the ID. But the modal did not do as set – it only appeared after 7 seconds have lapsed.

March 19, 2017 at 8:47 pm #1413151

Rad
Moderator

Hi there,

1. I checked your heading and why does it contain multiple font styling and sizes. You should only decide one font size, then override it with CSS for mobile devices,

<div>Free Delivery</div>

Example, it should be just like this

Free Delivery

You can find this code by editing your modal and edit your heading, then click the < > icon in the toolbar.

2. Looks like it’s only applicable for the desktop. Though, I’ll keep on checking.

Thanks!

March 20, 2017 at 6:01 am #1413478

iamwithU
Participant

Thanks Rad, for uncovering the flaws.

Pardon my ignorance, where do you go in order to check the heading? As I don’t know coding, CSS or html, I’m not sure where to see those codes or styling.

I’m new to modal. Where do I go to edit the heading and the ” < > icon in the toolbar.”?

Appreciate your checking for me.

March 20, 2017 at 9:50 am #1413695

Joao
Moderator

Hi There,

You can use the Chrome Inspector or Firebug from Firefox. Take 5minutes to watch some video tutorials on youtube.

I recommend you for example DevTips CSS Basics to get a basic but really solid understanding of CSS – it is 100% worth, trust me!

Hope it helps

Joao

March 20, 2017 at 10:50 am #1413790

iamwithU
Participant

I have 3 modals. Can Rad kindly tell me which is the one that has the problematic “multiple font styling & sizes”?

March 21, 2017 at 2:40 am #1414649

Paul R
Moderator

Hi,

It’s the free Delivery modal.

See screenshot – https://www.screencast.com/t/1DQCU80mr

thanks

March 22, 2017 at 5:08 am #1416010

iamwithU
Participant

O, I see what Rad meant by the < > icon! Your screen shot explained it perfectly. Thanks, Paul.

Ok, I’ll amend that right away. Which is now the operative value? The first or the last? I haven’t learnt coding, so I need a tip on which ones to delete.

March 22, 2017 at 9:25 am #1416253

iamwithU
Participant

Further to my earlier reply, I thought instead of amending my existing modal, I do another similar modal from scratch.(“Free Delivery 2”) It looks ok on the laptop, but when I see it on the phone, the headline shrinks. I’m not sure what must be added to make the headline stay big on all devices. Hence, I have no choice but to stick to my old modal (“Free Delivery”) but will need your kind help to remove the unnecessary font styling.

The other annoying thing is I selected “Close Modal By Clicking On” as “Close Button & Overlay”. But out of my 3 live modals, only one (“Free Delivery”) works – i.e. I can close the modal by clicking outside it. Whereas for the other 2 modals, I can only close them by clicking the “x” button. What have I done wrong?

March 22, 2017 at 9:15 pm #1417107
Rad
Moderator
Hi there,

You just need to maintain the inner code, which is this line

Free Delivery

And perhaps, add class to it like this

Free Delivery

Then you can simply add this CSS to Admin > Appearance > Customizer > Custom > CSS
```
@media ( max-width: 979px ) {
.convert_plug_heading {
font-size: 45px !important;
}
}

@media ( max-width: 767px ) {
.convert_plug_heading {
font-size: 40px !important;
}
}
```
It will then apply the font size of 979px (tablet) and 767px (mobile).

About the modal close feature, it seems to be working. Would you mind providing a video recording while browser developer’s console is open?

Thanks!
March 23, 2017 at 10:15 am #1417763

iamwithU
Participant

Thanks Rad. But I’m lost – do I delete the others that look like this:

Free Delivery ?

I’m not confident to delete anything now and not able to apply the concept here to my other modals.

March 23, 2017 at 7:23 pm #1418369

Rad
Moderator

Hi there,

No, you’ll delete everything else except that line. Then just add class="convert_plug_heading" as instructed. The final code should be like this

Free Delivery

Thanks!
Author

Posts

← 1 2 3 →