Currently, I am in the process of building a WordPress theme using Understrap and its customstrap child theme from livecanvas. This project involves utilizing Bootstrap 4.
I have successfully developed my theme, however, I am encountering an issue where an unnecessary border appears when clicking on the content area within the theme. Despite inspecting the code via the browser tools, I have been unable to pinpoint the source of this problem.
If you are interested, you can access the Understrap repository here: https://github.com/understrap/understrap
Additionally, below is a snippet from my page.php file:
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<div class="wrapper" id="page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<main class="site-main" id="main">
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'loop-templates/content', 'page' );
}
?>
</main><!-- #main -->
<!-- Do the right sidebar check -->
<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
</div><!-- .row -->
</div><!-- #content -->
</div><!-- #page-wrapper -->
<?php
get_footer();
Can anyone suggest which selector I should use to address this issue?
Please refer to the images below for visual representation:
1st image: Default appearance
2nd image: Appearance when the content area is clicked
https://i.sstatic.net/sxpyc.png https://i.sstatic.net/sx9q5.png
Encountering the border issue upon clicking the content area.