Icon-arrow to scroll top not having same position but same CSS - html

Question

I have this website made with wordpress with Astra but an astra child.
There is a default scroll top button which works fine but I cannot find out why the icon-arrow position is fine in all the pages but articles view.
(on astra theme official looks like fine)
I am not gonna make a reproduicible example as it is whole wordpress CSS and when I inspect I see the exact same CSS...
(I can fix the problem by adding a padding-top:20px on all articles for this button, but it is not the point here...)
Here it works: https://2b1stconsulting.com/news/
Here it does not: https://2b1stconsulting.com/digitalization-for-petroleum-and-renewable-projects/
Template PHP post
<?php
/*
* Template Name: News Template
* Template Post Type: post
*/
?>
<meta name="robots" content="noimageindex">
<?php
get_header(); ?>
<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?>
<div id="primary" <?php astra_primary_class(); ?>>
<section style="transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
padding: 20vh 0px 20vh 0px; background-image: url(/wp-content/uploads/2021/04/General-header-scaled-1.jpeg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;" class="elementor-section elementor-top-section elementor-element elementor-element-d7d8b56 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d7d8b56" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-background-overlay"></div>
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fd69444" data-id="fd69444" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-abcc2f2 elementor-widget elementor-widget-heading" data-id="abcc2f2" data-element_type="widget" data-widget_type="heading.default">
<div style="text-align: center;" class="elementor-widget-container">
<h1 style="color: #ffffff; font-weight: 100; letter-spacing: 1.4px; font-size: 5rem;"
class="elementor-heading-title elementor-size-default">News</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="border-bottom:1px solid #585858; border-bottom: 1px solid #585858; width: 70%; padding-top:30px; padding-bottom: 15px;" class="d-flex m-auto">
<span style="padding-right:15px;" class="ml-auto">Share on: </span>
<?php
$url=get_permalink();
?>
<a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $url; ?>">
<img style="height: 24px!important;;width: 24px;!important;" alt="logo linkedin" src="../wp-content/uploads/2021/04/linkedin-icon-2.svg"/>
</a>
</div>
<?php astra_primary_content_top(); ?>
<?php astra_content_loop(); ?>
<?php astra_primary_content_bottom(); ?>
</div><!-- #primary -->
<!--return button -->
<style>
.elementor-29677{
display:flex;
background: #fff;
padding: 20px 0;
}
.elementor-29677 .elementor-element.elementor-element-edbfa72{
margin-left: 15%;
}
.elementor-29677 a{
display:inline-block;
border:1px solid #000;
color:black;
transition: border 0s;
width: 180px;
text-align: center;
}
.elementor-29677 a:hover{
border: 1px solid rgba(0,0,0,0);
}
.elementor-29677 a .elementor-button-icon{
margin-right: 5px;
}
.elementor-29677 a svg{
transform: rotate(180deg);
margin-bottom: 2px;
}
.elementor-29677 a:after{
height:101%;
width:103%;
}
</style>
<div class="elementor-29677">
<div class="elementor-element elementor-element-edbfa72 black-icon mr-auto custom-btn-energy btn-hover-black elementor-widget elementor-widget-button" data-id="edbfa72" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a href="/news" class="elementor-button-link elementor-button elementor-size-sm" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="6.707" viewBox="0 0 18 6.707"><defs><style>.a,.b{fill:none;stroke:#fff;}.a{stroke-linecap:round;}</style></defs><g transform="translate(-792 -818.146)"><line class="a" x2="17" transform="translate(792.5 821.5)"></line><line class="b" x1="3" y1="3" transform="translate(806.5 818.5)"></line><line class="b" x1="3" y2="3" transform="translate(806.5 821.5)"></line></g></svg> </span>
<span class="elementor-button-text">Return</span>
</span>
</a>
</div>
</div>
</div>
</div>
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>

Answer 1

This is likely due to Quirks Mode enabled in the browser which is due to missing <!DOCTYPE html> on top of the page. This is why there is a difference in html rendering. Doctype of html is required
to inform the browser about document type to expect i.e HTML5.
Surprisingly the declaration is present on all other pages, which is where the arrow also seems correctly position, meaning it is most likely a theme bug. Two solutions are possible:
Quick css fix:
#ast-scroll-top .ast-icon.icon-arrow svg {
top: 50%;
transform: translate(0, -50%) rotate(
180deg);
}
Modify/Check header.php or track down why this <!DOCTYPE html> is being removed on this specific page. Exact solution ofcourse is possible if we have backend access.

Answer 2

try this
#ast-scroll-top {
background-color: rgba(226,0,26, .7);
transition: background-color 0.3s;
width: 3.1em;
height: 3.1em;
display: flex;
justify-content: center;
align-items: center;
}
also delete inline style display: block

Answer 3

just add this to your css
#ast-scroll-top span{
margin:1px;
}