У меня есть этот веб-сайт, созданный с помощью wordpress с Astra, но astra child.

Есть верхняя кнопка прокрутки по умолчанию, которая работает нормально, но я не могу понять, почему положение стрелки в виде значка подходит на всех страницах, кроме просмотра статей. (на тему астра официал вроде нормально выглядит)

Я не собираюсь приводить воспроизводимый пример, так как это весь CSS для WordPress, и когда я проверяю, я вижу точно такой же CSS ...

(Я могу решить эту проблему, добавив padding-top:20px во все статьи для этой кнопки, но это не главное ...)

Вот это работает: https://2b1stconsulting.com/news/

enter image description here

Здесь этого не происходит: https://2b1stconsulting.com/digitalization-for- проекты, связанные с нефтью и возобновляемыми источниками энергии /

enter image description here

Шаблон сообщения PHP

<?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(); ?>

0
MaxiGui 17 Сен 2021 в 16:59

3 ответа

Лучший ответ

Вероятно, это связано с тем, что в браузере включен Quirks Mode из-за отсутствия <!DOCTYPE html> вверху страницы . Вот почему есть разница в рендеринге html. Требуется Doctype html чтобы сообщить браузеру о типе документа, который следует ожидать, например, HTML5.

Удивительно, но это объявление присутствует на всех других страницах, и там стрелка также кажется правильной, что означает, что это, скорее всего, ошибка темы. Возможны два решения:

  1. Быстрое исправление css:

    #ast-scroll-top .ast-icon.icon-arrow svg {
     top: 50%;
     transform: translate(0, -50%) rotate( 
     180deg);
     } 
    
  2. Измените / проверьте header.php или отследите, почему этот <!DOCTYPE html> удаляется на этой конкретной странице. Точное решение, конечно, возможно, если у нас есть бэкэнд-доступ.

1
MaxiGui 17 Сен 2021 в 14:52

Попробуй это

#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;
}

Также удалить встроенный стиль display: block

0
user3733831 17 Сен 2021 в 14:46

Просто добавьте это в свой CSS

#ast-scroll-top span{
    margin:1px;
}
-1
Mohsen TOA 17 Сен 2021 в 14:24