When developing a WordPress theme I encountered this issue. I posted this question in WordPress stack exchange but received no answers.
I have a 2 column layout one column is in text & some images second is an image. In mobile view, they stack on each other but the image appears only when the height of (.column__two { width: 100%; height : 300px; }) is set to length. If set to auto or percent etc it does not display the image.
So why is this happening?
The code is below: In front-page.php
<div class="container__one">
<div class="column__one">
<h1><?php echo get_theme_mod('showcase_1_heading', 'Default heading') ?></h1>
<p><?php echo get_theme_mod('showcase_1_text', 'Default paragraph') ?></p>
<div class="three_images">
<div class="img__1">
<img src="<?php echo get_theme_mod('small_image1', get_bloginfo('template_url') . '/img/lunch-1.jpg'); ?>" alt="lunch image">
<p><?php echo get_theme_mod('showcase_1img1_text', 'Default paragraph') ?></p>
</div>
<div class="img__2">
<img src="<?php echo get_theme_mod('small_image2', get_bloginfo('template_url') . '/img/lunch-2.jpg'); ?>" alt="lunch image">
<p><?php echo get_theme_mod('showcase_2img2_text', 'Default paragraph') ?></p>
</div>
<div class="img__3">
<img src="<?php echo get_theme_mod('small_image3', get_bloginfo('template_url') . '/img/lunch-3.jpg'); ?>" alt="lunch image">
<p><?php echo get_theme_mod('showcase_3img3_text', 'Default paragraph') ?></p>
</div>
</div>
<a href="<?php echo get_theme_mod('btn_url', 'www.test.com') ?>"><?php echo get_theme_mod('btn_text') ?></a>
</div>
<div class="column__two">
<style>
.column__two {
background: url(<?php echo get_theme_mod('showcase_2_image', get_bloginfo('template_url') . '/img/showcase.jpg'); ?>) no-repeat center center;
background-size: cover;
}
</style>
</div>
In style.css
.container__one {
display: flex;
flex-wrap: wrap;
flex-direction: row;
/* align-content: space-around; */
margin: auto;
max-width: 960px;
height: fit-content;
}
.column__one {
background-color: grey;
width: 100%;
height: fit-content;
}
.column__two {
width: 100%;
height: 300px; /*The issue is in this line */
}
@media all and (min-width: 600px) {
.column__one {
width: 50%;
height: fit-content;
}
.column__two {
width: 50%;
height: auto;
}
}