register sidebar - After adding widget the style is messing up

admin管理员组

文章数量:1335411

I add a widget area to a wordpress theme but the style is somehow not matching with html here is the image before adding widget

after adding widget

widget area

functions.php

<?php
//Adding the css and js files
function gt_setup(){
    wp_enqueue_style('google-fonts','|Roboto+Condensed|Roboto+Slab');
    wp_enqueue_style('font-awesome','.1.0/css/all.css');
    wp_enqueue_style('style',get_stylesheet_uri());
    // wp_enqueue_script($handle,$src,$deps,$ver,$in_footer);
    wp_enqueue_script('main',get_theme_file_uri('/js/main.js'),NULL,'1.0',true);
}
add_action('wp_enqueue_scripts','gt_setup');

//Adding theme support

function gt_init(){
    add_theme_support( 'post-thumbnails' );
    add_theme_support('title-tag');
    add_theme_support('html5',
     array('comment-list','comment-form','search-form')
     );
    }
add_action('after_setup_theme','gt_init');

//Project post type
function gt_custom_post_type(){
    register_post_type('project',
    array(
     'rewrite'=> array('slug'=>'projects'),
     'labels' => array(
       'name' => 'Projects',
       'singular_name' => 'Project',
       'add_new_item' => 'Add New Project',
       'edit_item' => 'Edit Project'
     ),
     'menu-icon' => 'dashicons-clipboard',
     'public' => true,
     'has_archive' =>true,
     'supports' => array(
       'title' , 'thumbnail' , 'editor' , 'excerpt' , 'comments'
     )
    )
  );
}
add_action('init','gt_custom_post_type');

//remove url field from comment form
 function prefix_disable_comment_url($fields){
     unset($fields['url']);
     return $fields;
 }
 add_filter('comment_form_default_fields','prefix_disable_comment_url');
 //Sidebar
 function gt_widgets(){
     register_sidebar( 
     array(
     'name' => 'Main Sidebar',
     'id' => 'main_sidebar',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
     )
     );

 }
 add_action('widgets_init','gt_widgets');
//Filters
function search_filter($query){
    if($query->is_search()){
        $query->set('post_type',array('post','project'));
    }
}
add_filter('pre_get_posts','search_filter');

//front-page widget
function gt_widgets_init() {

    register_sidebar(
        array(
            'name'          => __( 'Frontpage'),
            'id'            => 'section-source',
            'description'   => __( 'Add widgets here to appear in your frontpage.'),
            'before_widget' => '<section id="section-source">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="section-heading">',
            'after_title'   => '</h2>',
        )
    );

}
add_action( 'widgets_init', 'gt_widgets_init' );


?>

front-page.php

<?php get_header();?>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="<?php echo site_url('/blog');?>">
            <h2 class="section-heading">All Blogs</h2>
        </a>


        <section>
           <?php
        $args =  array(
         'post_type' => 'post',
         'posts_per_page' => 2
        );
        $blogposts = new WP_Query($args);

        while($blogposts->have_posts()){
            $blogposts->the_post();

      ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>

        <a href="<?php echo site_url('/projects');?>">
            <h2 class="section-heading">All Projects</h2>
        </a>


        <section>
           <?php
            $args =  array(
             'post_type' => 'project',
             'posts_per_page' => 2
            );
            $projects = new WP_Query($args);

            while($projects->have_posts()){
                $projects->the_post();

          ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>


              <?php 
               dynamic_sidebar( 'Frontpage' ); 
              ?>




      <!-- <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>-->

      <?php get_footer();?>

frontpage html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href=".1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
        crossorigin="anonymous">
    <link href="|Roboto+Condensed|Roboto+Slab" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>GTCoding</title>
</head>

<body>
    <div id="slideout-menu">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <input type="text" placeholder="Search Here">
            </li>
        </ul>
    </div>

    <nav>
        <div id="logo-img">
            <a href="#">
                <img src="img/logo.png" alt="GTCoding Logo">
            </a>
        </div>
        <div id="menu-icon">
            <i class="fas fa-bars"></i>
        </div>
        <ul>
            <li>
                <a class="active" href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <div id="search-icon">
                    <i class="fas fa-search"></i>
                </div>
            </li>
        </ul>
    </nav>

    <div id="searchbox">
        <input type="text" placeholder="Search Here">
    </div>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="blogslist.html">
            <h2 class="section-heading">All Blogs</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/1.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/2.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <a href="blogslist.html">
            <h2 class="section-heading">All Projects</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/3.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/4.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>

        <footer>
            <div id="left-footer">
                <h3>Quick Links</h3>
                <p>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="#">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Blogs</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Projects</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </p>
            </div>

            <div id="right-footer">
                <h3>Follow us on</h3>
                <div id="social-media-footer">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <p>This website is developed by GTCoding</p>
            </div>
        </footer>

    </main>

    <script src="main.js"></script>
</body>

</html>

i see a extra div is generated when i inspect element

before adding widget

how i fix this?

I add a widget area to a wordpress theme but the style is somehow not matching with html here is the image before adding widget

after adding widget

widget area

functions.php

<?php
//Adding the css and js files
function gt_setup(){
    wp_enqueue_style('google-fonts','https://fonts.googleapis/css?family=Roboto|Roboto+Condensed|Roboto+Slab');
    wp_enqueue_style('font-awesome','https://use.fontawesome/releases/v5.1.0/css/all.css');
    wp_enqueue_style('style',get_stylesheet_uri());
    // wp_enqueue_script($handle,$src,$deps,$ver,$in_footer);
    wp_enqueue_script('main',get_theme_file_uri('/js/main.js'),NULL,'1.0',true);
}
add_action('wp_enqueue_scripts','gt_setup');

//Adding theme support

function gt_init(){
    add_theme_support( 'post-thumbnails' );
    add_theme_support('title-tag');
    add_theme_support('html5',
     array('comment-list','comment-form','search-form')
     );
    }
add_action('after_setup_theme','gt_init');

//Project post type
function gt_custom_post_type(){
    register_post_type('project',
    array(
     'rewrite'=> array('slug'=>'projects'),
     'labels' => array(
       'name' => 'Projects',
       'singular_name' => 'Project',
       'add_new_item' => 'Add New Project',
       'edit_item' => 'Edit Project'
     ),
     'menu-icon' => 'dashicons-clipboard',
     'public' => true,
     'has_archive' =>true,
     'supports' => array(
       'title' , 'thumbnail' , 'editor' , 'excerpt' , 'comments'
     )
    )
  );
}
add_action('init','gt_custom_post_type');

//remove url field from comment form
 function prefix_disable_comment_url($fields){
     unset($fields['url']);
     return $fields;
 }
 add_filter('comment_form_default_fields','prefix_disable_comment_url');
 //Sidebar
 function gt_widgets(){
     register_sidebar( 
     array(
     'name' => 'Main Sidebar',
     'id' => 'main_sidebar',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
     )
     );

 }
 add_action('widgets_init','gt_widgets');
//Filters
function search_filter($query){
    if($query->is_search()){
        $query->set('post_type',array('post','project'));
    }
}
add_filter('pre_get_posts','search_filter');

//front-page widget
function gt_widgets_init() {

    register_sidebar(
        array(
            'name'          => __( 'Frontpage'),
            'id'            => 'section-source',
            'description'   => __( 'Add widgets here to appear in your frontpage.'),
            'before_widget' => '<section id="section-source">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="section-heading">',
            'after_title'   => '</h2>',
        )
    );

}
add_action( 'widgets_init', 'gt_widgets_init' );


?>

front-page.php

<?php get_header();?>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="<?php echo site_url('/blog');?>">
            <h2 class="section-heading">All Blogs</h2>
        </a>


        <section>
           <?php
        $args =  array(
         'post_type' => 'post',
         'posts_per_page' => 2
        );
        $blogposts = new WP_Query($args);

        while($blogposts->have_posts()){
            $blogposts->the_post();

      ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>

        <a href="<?php echo site_url('/projects');?>">
            <h2 class="section-heading">All Projects</h2>
        </a>


        <section>
           <?php
            $args =  array(
             'post_type' => 'project',
             'posts_per_page' => 2
            );
            $projects = new WP_Query($args);

            while($projects->have_posts()){
                $projects->the_post();

          ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>


              <?php 
               dynamic_sidebar( 'Frontpage' ); 
              ?>




      <!-- <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>-->

      <?php get_footer();?>

frontpage html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis/css?family=Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>GTCoding</title>
</head>

<body>
    <div id="slideout-menu">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <input type="text" placeholder="Search Here">
            </li>
        </ul>
    </div>

    <nav>
        <div id="logo-img">
            <a href="#">
                <img src="img/logo.png" alt="GTCoding Logo">
            </a>
        </div>
        <div id="menu-icon">
            <i class="fas fa-bars"></i>
        </div>
        <ul>
            <li>
                <a class="active" href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <div id="search-icon">
                    <i class="fas fa-search"></i>
                </div>
            </li>
        </ul>
    </nav>

    <div id="searchbox">
        <input type="text" placeholder="Search Here">
    </div>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="blogslist.html">
            <h2 class="section-heading">All Blogs</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/1.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/2.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <a href="blogslist.html">
            <h2 class="section-heading">All Projects</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/3.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/4.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>

        <footer>
            <div id="left-footer">
                <h3>Quick Links</h3>
                <p>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="#">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Blogs</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Projects</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </p>
            </div>

            <div id="right-footer">
                <h3>Follow us on</h3>
                <div id="social-media-footer">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <p>This website is developed by GTCoding</p>
            </div>
        </footer>

    </main>

    <script src="main.js"></script>
</body>

</html>

i see a extra div is generated when i inspect element

before adding widget

how i fix this?

• widgets
• register-sidebar

Share Improve this question edited May 29, 2020 at 6:40 Sash_007 asked May 29, 2020 at 2:10 Sash_007Sash_007 744 bronze badges 7

• It is difficult to debug when there is nothing to compare. What is the code you added? – Mort 1305 Commented May 29, 2020 at 3:42
• Where is your closing <main> tag output, because its not in front-page.php? Also, it would be helpful if you could somehow post the HTML that is between the <main> tags (or at least from the last couple lines of the preceding section thru the <section id='section-source'> that is commented out). And, it looks like you have a widget in the Frontpage sidebar named textwidget (that's the extra div), so I'd check if that is enqueuing anything that is modifying the CSS for class='section-heading'. – Mort 1305 Commented May 29, 2020 at 5:41
• i have updated the required files.,also replaced the images as i was adding text from widget area now i am using html so the output is little different...i also edited the css file .custom-html-widget{ text-align:center; } but still the button remains to the left – Sash_007 Commented May 29, 2020 at 6:43
• closing of my <main> is in footer.php – Sash_007 Commented May 29, 2020 at 7:07
• Two things. First, your <footer> is inside your <main>. Is this your intention? Usually, the footer tag follows, and is seperate from, main. Second, I can find no output from the Frontpage sidebar in the HTML you provided: goes right from All Projects Section to Source Code. Is it off? I find no discrepancies in the HTML you provided, so I assume this is a css problem. Please review your style.css and main.js files for .section-heading and report those code blocks. – Mort 1305 Commented May 29, 2020 at 7:57

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

What you'll have to do is look at your HTML both before and after adding the widget. Whatever stylesheet (link) appears and disappears is the stylesheet that is giving you the problem. Search the CSS for the .section-heading selector and you will have found your culprit.

本文标签： register sidebarAfter adding widget the style is messing up