How to lock images position between different elements

You should add these images as background :after and :before of buttons, that way you will ensure that they will stick when the website is visited on different devices.
I gave you the idea, if you don't know how to achieve this I can try and write the code for you.

 

Please give the two buttons a unique ID here

Save and let me know.

 

Sorry for the delay. I had to twist my mind around this but I found the hack. Please try this custom CSS.
@media (max-width: 767px) {
.page-id-9 .et_pb_button_0_wrapper,
.page-id-9 .et_pb_button_1_wrapper {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.page-id-9 .et_pb_button_0_wrapper:after {
content: " ";
background: url(https://megavisuals.nz/wp-content/uploads/2020/06/arrow_1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 40px;
height: 60px;
display: block;
position: absolute;
right: -50px;
top: -10px;
z-index: 1;
}
.page-id-9 .et_pb_button_1_wrapper:before {
content: " ";
background: url(https://megavisuals.nz/wp-content/uploads/2020/06/arrow_2.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 40px;
height: 60px;
display: block;
position: absolute;
left: -50px;
top: -10px;
z-index: 1;
}
}

Let me know if this worked. This should work on mobile both horizontally and vertically.

Best regards,

 

Your issue is was mobile landscape view so I made a solution for that. You already have arrows on the desktop view.

 

Of course, it is possible, just, I spent some time solving your original issue, and my free time used for helping people is limited. Hope you understand.