Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points
Posted by Angelic Sanoy
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points

Image Overlap on My Bootstrap (WordPress)

Hi Guys,

Do you have any idea why this image overlap on my bootstrap modal? http://getrefinanced.com.au/compare-home-loans/

Kindly try to click the compare home loans button. I use CDN.

1 Answer

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

Trying moving the modal to be the first element after the opening <body> tag.

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points
Angelic Sanoy
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points

Hi Adam, Thanks for responding. I declared a body tag on my child theme below the modal but it's still not working. I also tried to add margin and color the body tag to black to double check if it's the css is already working, there's no problem at all so far. It's just the other elements inside the body tag is overlapping the modal. Is there other I am missing?

I declared the stylesheet and script in functions.php even in the styles.css but no success.

Below is the syntax:

/*
Theme Name:     Extra-child
 Theme URI:     https://www.elegantthemes.com/gallery/divi/
 Description:   Divi Child Theme
 Author:        Elegant Themes
 Author URI:    https://www.elegantthemes.com
 Template:      Extra
 Version:        2.5.1

*/


@import url("../Extra/style.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css");


/*Modal Here*/
.modal-dialog {
    margin-top:200px!important;
}

.modal-backdrop {
  display: none!important;
}

 .modal {
  background: rgba(0,0,0,0.5)!important;
}
/*End of Modal Here*/

#et-navigation>ul>li>a:before {
    background: white!important;
}

body {margin:10px; background:black;}

Here's the following markup for functions.php. The bootstrap css and js are working, it's just not displaying properly.

<?php
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); 
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css' );

add_action('wp_enqueue_scripts', 'custom_scripts_method'); 
function custom_scripts_method(){
    wp_register_script('mycustomscripts', 
    $protocol . 'https://code.jquery.com/jquery-1.12.4.min.js', array(), '3.2.1', true);
    wp_enqueue_script('mycustomscripts');

    wp_register_script('bootstrap-scripts', 
    $protocol . 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array(), '4.1.1', true);
    wp_enqueue_script('bootstrap-scripts');
}
?>