Images disappeared from page after styling / plugins Empty space [Wordpress.org localhost, PHP, HTML, CSS}

Question

BACKGROUND

As part of a course, I created a very basic WordPress theme (PHP) in Notepad++. Worked fine. Added some plugins. Worked fine. Added contact form and discussion plugins. Also did some styling.

PROBLEM

Now images do not show up, only a space where the image should be. Not sure if it is the plugins (left support requests) or the styling (asking here). Am pasting all my code here (PHP modules and CSS). Hopefully someone more experienced can spot the error.

WHAT I HAVE TRIED

I float ed the nav to the left. Added a clear to the next element (class main) but this did not help.
Images show when I changed theme to another WordPress theme (Twenty Twenty). Images also show in WordPress customizer mode, but not when post / page is published.
Support requests on Wordpress , discussion forum plugin (Asgaros) ( screenshots here ) , contact form plugins ( forminator , WP Forms )
EDIT : Added screenshots ( developer tools, php error message, blog page, wp-admin page, customize theme page ) in this Google Drive folder

CODE

header.php

<!-- HEADER.PHP START -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
        <title>My first Wordpress Theme</title>
</head>

<body>
    <div id="wrapper">
        <header>
            <div>
                <h1 class ="title-heading" >The Internet Life</h1>
                <p>Working and living with the web</p>
            </div>
        </header>
        <nav>
            <!-- <p>Navigeringsmeny. This will be the navbar area</p> -->
            <ul>
                <li class = "page_item"><a href ="<?php echo home_url(); ?>">Home</a></li>
                <?php wp_list_pages( '&title_li=' ); ?>
            </ul>
        </nav>
        <!-- HEADER.PHP END -->

index.php The code in the section will show the blog posts on the start page, as opposed to other pages I manually create which will appear in the nav

<!-- PHP INSERT HEADER CODE -->
    <?php get_header(); ?>
        <div class="main">
            <div id="content">
                <article>
        <!--START individual BLOG POSTS CODE -->
        <?php 
        if ( have_posts() ) : while ( have_posts() ) : the_post();?>
            <section>
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
            </section>
        <?php endwhile; endif;?>
        <!--START individual BLOG POSTS CODE -->
                </article>
            </div>
<!-- PHP INSERT sidebar CODE -->
    <?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
    <?php get_footer(); ?>

sidebar.php

            <!-- SIDEBAR.PHP START ASIDE -->
            <aside class="sidebar">
                <p>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                <a href="#">Ethics</a>
                <a href="#">History</a>
                <a href="#">Webtech</a>
                </p>
            </aside>
            <!-- SIDEBAR.PHP  END ASIDE -->

footer.php

        <!-- FOOTER.PHP START -->
        <footer>
            <div class="footerarea">
                <p>Copyright abc</p>
            </div>
        </footer>
        <!-- FOOTER.PHP END -->

page.php This is the template for how each page appears. The code inserts individual page content in the section

    <?php 
/** 
* Template Name: Mall
*/
    ?> 
<!--  PHP INSERT HEADER CODE -->
    <?php get_header(); ?>
        <div class="main">
            <div id="content">
                <article id="page-wrapper">
        <section class="page_content">
        <!-- START individual page CODE -->
        <?php
            if ( have_posts() ) : while ( have_posts() ) : the_post();
                get_template_part( 'content', get_post_format() );
            endwhile; endif; 
        the_content(); ?>
        <!-- END individual page CODE -->
       </section>
                </article>
            </div>
<!-- PHP INSERT sidebar CODE -->
    <?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
    <?php get_footer(); ?>

style.css

/*
Theme Name: FirstWordpress Practice
Author: abc
Description: def theme 
Version: 1.0
License: GNU General Public License v2 or later
Tags: Fun
Text Domain: basic learning
  */
    /* 
    colors
    linen #f9eee7
    lightest antique white #fce5da
    lightish yellow peachpuff #f7d8ba
    beige #F2A341
    LIGHT BEIGe #F2D5BB
    BROWN #BF815E
    red #F21D1D
    light red #F24444
    */
 
 HTML{
     margin: 0;
     padding: 0;
 }

header {
    margin: 0 auto 0 auto;
    padding: 1rem;
    border: solid 2px #F24444;
    color: #f9eee7;
}
body {
    margin: 0;
    padding: 0;
}   

  @font-face {
      font-family: 'Orbitron', sans-serif, 'Montserrat';
  }

h1, h2, h3, h4, h5, h6, h7, h8 {
      font-family: 'Orbitron', sans-serif;
}
#wrapper {
    background-color: #F21D1D;
    font-family: 'Montserrat', sans-serif ;
    margin: 0;
    padding: 1rem;
} 
#content {
    background-color: #fce5da;
    font-family: 'Orbitron', sans-serif, 'Montserrat';
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.2;     /*accessibility large font with extra letter spacing and line hight*/
    letter-spacing: 1px;
}
/*#content {
width: 95%;
background: whitesmoke;
margin: 0 auto;
}*/ 
title-heading {
margin-top: 0;
}
nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #111; /* Black */
}
nav li {
 float: left;
}
nav li a {
 display: block;
 /*color: #ffe6ff; the original black color*/
 color: #F24444;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 text-transform: uppercase;
}

/* Change the navigation link color to #111 (black) on hover */
nav li a:hover {
 background-color: #29293d;
 color: #f7d8ba;
}
/*link styling*/
section a {
 color: #F21D1D;
 text-decoration: none;
 font-weight: bolder;
}
/* Change the link color to #111 (black) on hover */
section a:hover {
 background-color: #29293d;
 color: #f7d8ba;
}
/* Style page content */
.main {
    clear: both; /*Clearing the float from the navigatation element above main in header php*/
margin: 0 160px 0 0; 
 /*margin-right: 160px;  Same as the width of the sidebar */
  padding: 0px 10px;
}
/*Creating spacing 
#page-wrapper, .page_content {
    margin: 1rem;
    padding: 1rem;
}*/ 

/* The sidebar menu */
.sidebar {
  height: 100%; /* Full-height*/
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The sidebar menu links */
.sidebar a {
  padding: 6px 16px 6px 8px;
  text-decoration: none;
  font-size: 25px;
  color: #F24444;
  display: block;
}

/* When you mouse over the navigation links color changes*/
.sidebar a:hover {
  background-color: #29293d;
 color: #f7d8ba;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

footer {
    border: 3px solid #F24444;
    margin-bottom: 0;
    padding: 0.5rem;
    color: #f9eee7;
}

Thanks

Answer 1

The issue was the z-index on the sidebar. I gave the img a higher z-index and they appeared.

Images disappeared from page after styling / plugins Empty space [Wordpress.org localhost, PHP, HTML, CSS}

Question

1 answers

solution1
0 2021-08-19 09:18:46

Images disappeared from page after styling / plugins Empty space [Wordpress.org localhost, PHP, HTML, CSS}

Question

1 answers

solution1 0 2021-08-19 09:18:46

solution1
0 2021-08-19 09:18:46