Wordpress - The image doesn't appear with text on Mobile but appear on Desktop in the same section

DevCoder
December 24, 2024
120 views
1 vote
2 Answers

I have created a responsive UI page on bootstrap. I have a responsive image on the left side and text on the right side of the same section.

Right now I can see the image on the desktop but not any kind of mobile device when tested from the developer tools.

You can find that image code below which is not appearing on mobile but on desktop,

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">

Please find the full code below,

  <!--About Dine section 1-->
  <section class="about_sec_1 ">
    <div class="container ">
      <!--In this section, I divided two columns: one with 'col-lg-5' and 
  the second with 'col-lg-6'. Additionally, I added 'col' classes to ensure equal width,
  .col classese acuired the 100% width according to screen size
  -->
      <div class="  about_content">
        <div class="left_img col col-lg-5">

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">



      </div>

        <div class="right_content col  col-lg-6">
          <div class="text-center">
    <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
    <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?> </h4>
          </div>
          <p class="about_para ">
            The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use
            seasonal ingredients.
          <p class="text-muted">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!--end of About Dine section 1-->

Please find the CSS below,

/* media querie for about dine section img*/
@media(max-width:575px) {
    .left_img {
    display:block;

    }
}

.about_content,
.menu_content {
    /*make two column content of menu and about section by using flexbox*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.5rem;
}

.about_para {
    line-height: 30px;
}

You can see the image of the section below,

On Mobile it looks like this

Answers

You have an exta closing paragraph tag (</p>) in your HTML code, try removing that and see if it helps.

<!--About Dine section 1-->
<section class="about_sec_1">
  <div class="container">
    <div class="about_content">
      <div class="left_img col col-lg-5">
        <img class="w-100" src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics" />
      </div>

      <div class="right_content col col-lg-6">
        <div class="text-center">
          <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
          <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?></h4>
        </div>
        <p class="about_para">
          The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use seasonal ingredients.
        </p>

        <p class="text-muted">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <!-- HERE IT IS -->
        <!-- </p> -->

      </div>
    </div>
  </div>
</section>

<!--end of About Dine section 1-->

Also, I don’t understand why you in your CSS you do this:

@media (max-width: 575px) {
  .left_img {
    display: block;
  }
}

<div> is already a block-level element, so you don’t have to do that.

If you are trying to make it responsive, I would transform your CSS to this:

/* media querie for about dine section img*/
/* @media (max-width: 575px) {
  .left_img {
    display: block;
  }
} */

.about_content,
.menu_content {
  /*make two column content of menu and about section by using flexbox*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3.5rem;
}

.about_para {
  line-height: 30px;
}

/*  */

.left_img.col {
  flex-basis: auto !important;
}

Setting flex-basis: auto allows the .left_img.col element to size itself based on its content and available space in the flex container, making it responsive when combined with flex-wrap: wrap.

Dude remember to wrap you .col divs in a .row div as standard with BS.

You tagged this question with BS4 and BS5 tags… and these frameworks are two different beasts…

I’m assuming it’s BS5 because you are using col class!

Rule of thumb with BS4 and BS5… nest your column divs in row divs.

@Nazar was right you had invalid markup with that dupe closing p tag.

But… your mark up never truly work unless you use it like this…

<section class="about_sec_1">
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics" />
      </div>
      <div class="col-lg-7">
        <div class="text-center">
          <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
          <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?></h4>
        </div>
        <p>
          The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use seasonal ingredients.
        </p>
        <p class="text-muted">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
  </div>
</section>

Don not add unnecessary wrapping div elements around BS5 framework based columns, rows and containers. Keep it clean and how BS shows in the docs. Only start adding custom classes on elements inside BS5 cols where it doesn’t effect the responsiveness.

Also note if you are ever using a .col- column class, you don’t need to redefine .col class because all the .col css has already been from the column class. Only use .col if you want the column to auto resize itself with no set grid structure 🙂

Happy BootStrapping!

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress – The image doesn't appear with text on Mobile but appear on Desktop in the same section

Answers