How do I make this full screen upon place order

Support
#1

I want to have a spinner similiar to how X uses theirs this is the code I am using and it works but I want it to be full screen and show some text that the order is being processed

.processing .blockOverlay {
background-image:url(‘https://theawakenedoracle.com/wp-content/uploads/2018/05/youth-570881_640.jpg’) !important;
background-position: center 30% !important;
background-repeat: no-repeat !important;
}

How to add test to Spinner on order placement
#2

Hi,

You can try this code.

.processing .blockOverlay {
    background-image:url('https://theawakenedoracle.com/wp-content/uploads/2018/05/youth-570881_640.jpg') !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

Hope that helps.

#3

I can see the image but only if I scroll up I would like to know how to make it full screen while its processing order

#4

Hi There,

Can you please post a screenshot what exactly you want to achieve.
We are little confuse about the requirement.

Thanks

#5

what I am trying to accomplish is after the order is placed to have a full screen preloader showing the order is being processed as of now there is no indication of that the page just goes dim while it is submitting the order

#6

Hello There,

We cannot fully visualize how the overlay displays on the page because your site is under construction mode. Could you please provide us access so that we can check and test your order process?

Thanks.

#10

Hi There,

Please update the previous CSS to this:

.processing .blockOverlay {
    background-image:url('https://theawakenedoracle.com/wp-content/uploads/2018/05/youth-570881_640.jpg') !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height: 100%;
    width: 100%;
}

Let us know how it goes!

#11

This does work but only to a point in order to see the animation you have to rescroll back up the page. How do I make it visable full screen

#12

Hi there,

Please change this

position:absolute;

to this

position:fixed; z-index: 999999;

Thanks!

#13

still same issue
position fixed does not make this go full screen

#14

Hello There,

Please have the code updated and use this one:

.processing .blockOverlay {
    background-image:url('https://theawakenedoracle.com/wp-content/uploads/2018/05/youth-570881_640.jpg') !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 9999999 !important;
}

!important were added to force the css to be implemented and override any inline css attache to the overlay element.

We would loved to know if this has work for you. Thank you.

#15

That did it thanks so much

#16

You’re welcome.

#17

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