0

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>
</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;
}

@media all and (min-width: 600px) {
    .column__one {
        width: 50%;
        height: fit-content;
    }
    .column__two {
        width: 50%;
        height: auto;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.