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

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="{&quot;background_background&quot;:&quot;classic&quot;}">
            <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(); ?>

Can you post the code that repros the issue in the question? — Carol Skelly, Sep 17 '21 at 14:15

score 1 · Accepted Answer · edited Sep 17 '21 at 14:52

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.

edited Sep 17 '21 at 14:52

MaxiGui

6,190
4
16
33

answered Sep 17 '21 at 14:39

Mustafa sabir

4,130
1
19
28

That's it ! And it is not there because I recently added `` but I added above the `` so it does not show it anymore. I added ` ` above the meta and it fixed it ! Question is now, is there a good way to set this meta into the header only for custom posts template – MaxiGui Sep 17 '21 at 14:46
1

You could add this in `header.php` with conditions, I usually do for specific pages, but should work for custom post types too: `global $post; if($post->post_type == 'my-custom-post-type' ){ echo ''; }` . You can add more conditions using the `$post` object too like `$post -> ID` or `$post -> post_status` – Mustafa sabir Sep 20 '21 at 09:05

user3733831 · Answer 2 · 2021-09-17T14:46:25.453

0

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

edited Sep 17 '21 at 14:46

answered Sep 17 '21 at 14:23

user3733831

2,886
9
36
68

Surely I know that would fix it, but it is not my question. I want to know why is one correct and the other is not. – MaxiGui Sep 17 '21 at 14:25
1

I also willing to know, how it works differently between two. lets see somebody may pointed out – user3733831 Sep 17 '21 at 14:35
On the official astra theme it seems to work fine, but on my child theme, it seems to be like this, so it might be that I miss something on the child theme – MaxiGui Sep 17 '21 at 14:39
Just found your inner `svg` have an issue.. – user3733831 Sep 17 '21 at 14:41
Mustafa above find it out , thank you anyway – MaxiGui Sep 17 '21 at 14:50
I also thought about this `top: 50%; transform: translate(0, -50%) rotate( 180deg);`. But I didn't see your `DOCTYPE` issue – user3733831 Sep 17 '21 at 14:55

score -2 · Answer 3 · answered Sep 17 '21 at 14:24

-2

just add this to your css

#ast-scroll-top span{
    margin:1px;
}

answered Sep 17 '21 at 14:24

Mohsen TOA

759
10
17

This wont fix anything – MaxiGui Sep 17 '21 at 14:26

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

Template PHP post

3 Answers3