On mobile devices, the text is showing up without the image, while on desktops the image is displaying correctly alongside the text in

Question

On mobile devices, the text is showing up without the image, while on desktops the image is displaying correctly alongside the text in

I have designed a responsive UI page using bootstrap, featuring a responsive image on the left side and text on the right side of the section.

Currently, the image appears on desktop but not on any mobile device when tested using developer tools.

Below is the code for the image that is not showing on mobile devices:

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

For the complete code, refer to the following:

  <!--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 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-->

The CSS code can be found 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;
}

Refer to the images of the section below:

https://i.sstatic.net/yryRxhB0.png

Here's how it looks on mobile: https://i.sstatic.net/QSIUiD2n.png

html css wordpress bootstrap-4 bootstrap-5

Answer 1

Answer №1

Hey, don't forget to wrap your .col divs inside a .row div as per Bootstrap standards.

You've tagged this question with both BS4 and BS5 tags... and these frameworks are quite different...

Based on your usage of the col class, I'm assuming you're working with BS5!

A general rule for both BS4 and BS5 is to nest your column divs within row divs.

@Nazar was correct about the invalid markup with that duplicate closing p tag.

However, your markup won't function correctly unless structured 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't add unnecessary extra div elements around columns, rows, and containers in Bootstrap 5. Stick to the clean structure as shown in the documentation. Only introduce custom classes when needed inside BS5 columns without affecting responsiveness.

Also, if you're using a .col- column class, there's no need to redefine the .col class as all necessary CSS is included in the column class itself. Use .col only if you want the column to resize automatically without predefined grid structure :-)

Happy BootStrapping!

Answer 2

Hey, don't forget to wrap your .col divs inside a .row div as per Bootstrap standards.

You've tagged this question with both BS4 and BS5 tags... and these frameworks are quite different...

Based on your usage of the col class, I'm assuming you're working with BS5!

A general rule for both BS4 and BS5 is to nest your column divs within row divs.

@Nazar was correct about the invalid markup with that duplicate closing p tag.

However, your markup won't function correctly unless structured 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't add unnecessary extra div elements around columns, rows, and containers in Bootstrap 5. Stick to the clean structure as shown in the documentation. Only introduce custom classes when needed inside BS5 columns without affecting responsiveness.

Also, if you're using a .col- column class, there's no need to redefine the .col class as all necessary CSS is included in the column class itself. Use .col only if you want the column to resize automatically without predefined grid structure :-)

Happy BootStrapping!

Answer 3

Answer №2

Make sure to check for any extra closing paragraph tags (</p>) in your HTML code and remove them if necessary to ensure proper structure.

<!--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 temporincidunt 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-->

Your CSS can be optimized by removing redundant styling that is not needed:

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

No need to explicitly set display: block for a <div> element as it's already block-level by default.

To make your design more responsive, consider updating your CSS like this:

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

By setting flex-basis: auto, the .left_img.col element will adjust its size based on content and available space within the flex container, enhancing responsiveness when combined with flex-wrap: wrap.

Answer 4

Make sure to check for any extra closing paragraph tags (</p>) in your HTML code and remove them if necessary to ensure proper structure.

<!--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 temporincidunt 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-->

Your CSS can be optimized by removing redundant styling that is not needed:

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

No need to explicitly set display: block for a <div> element as it's already block-level by default.

To make your design more responsive, consider updating your CSS like this:

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

By setting flex-basis: auto, the .left_img.col element will adjust its size based on content and available space within the flex container, enhancing responsiveness when combined with flex-wrap: wrap.

On mobile devices, the text is showing up without the image, while on desktops the image is displaying correctly alongside the text in

Answer №1

Answer №2

Similar questions

The slide effect in jQuery's show() function isn't being displayed as expected

Pressing "Enter" after filling out a box on a form is like sending your

Manipulate the value of the <input> element when focused through JavaScript

Uncovering a specific element within an array using knockout techniques

Instead of clicking directly on the link, you can click anywhere on the div

Is it possible to automatically play a sound clip when the page loads?

Styling with CSS and Bootstrap: Looking to position two divs next to each other within another div

Build a custom form for the purpose of exporting an HTML file

Issues with CSS rendering font in a suboptimal way

Automatically updating table inserts an extra row based on a specified parameter

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

Utilizing checkboxes to extract multiple columns from my MySQL database using PHP

Steps for designing a navigational bar with tabbed style that is responsive

Is there a way to showcase the newly added state object on the page without having to reload the page?

The CSS overflow hidden attribute is leading to issues with the functionality of the Google Maps API

Is the background image viewport centered?

Tips for aligning text and images in a vertical baseline position

`Troubleshooting problems with Vue's v-model data binding`

Sliding Dropdown Menu with Dynamic Title Change Upon Selection

Update the image source within a CSS element