Left column appears on top when viewing in mobile, how to change?

[ignas04]

Hi!

So I'm having a problem with the product page, specifically on mobile. I have a FAQ module which I put on the left column of the product page. On desktop it shows up correctly - below the product pictures. But on mobile it shows up below the product pictures as well, which would be a terrible design choice.

1. In the ideal situation, I would like for the desktop view to stay the same and the mobile view to have the FAQ module after the description or in another place, just not below the images.

2. If that's impossible, how can I make the product description be the whole width of the page instead of being on the right column?

3. Alternatively, how do I disable the display of the FAQ module on the product page on mobile?

I have attached desktop and mobile images for reference. Prestashop version 8.1.3, PHP version 8.2.28.

Thank you so much!

Best regards

Ignas.

[El Patron]

Different placement of FAQ module on mobile only

To change the FAQ position on mobile, you can use responsive CSS + JS or template overrides. A typical method is:

Option A: Use jQuery to move it dynamically on mobile

In your theme’s JS (e.g., /themes/your_theme/assets/js/custom.js), add:

$(document).ready(function() {
  if ($(window).width() < 768) {
    var $faq = $('#your-faq-module-id'); // Replace with actual ID or class
    var $target = $('.product-information'); // Or wherever you want it (e.g. under description)
    if ($faq.length && $target.length) {
      $faq.insertAfter($target);
    }
  }
});

Make sure the module has a unique id or class to target it.

or simply hook faq module to a new tab, this is the most common practice.

[ignas04]

  

17 minutes ago, El Patron said:

Different placement of FAQ module on mobile only

To change the FAQ position on mobile, you can use responsive CSS + JS or template overrides. A typical method is:

Option A: Use jQuery to move it dynamically on mobile

In your theme’s JS (e.g., /themes/your_theme/assets/js/custom.js), add:

$(document).ready(function() {
  if ($(window).width() < 768) {
    var $faq = $('#your-faq-module-id'); // Replace with actual ID or class
    var $target = $('.product-information'); // Or wherever you want it (e.g. under description)
    if ($faq.length && $target.length) {
      $faq.insertAfter($target);
    }
  }
});

Make sure the module has a unique id or class to target it.

or simply hook faq module to a new tab, this is the most common practice.

Thank you for your quick reply, El Patron!

I do need some help with locating the class / ID which is necessary to place in the code. If you can provide a pointer as to where I should look to find it, I would be eternally grateful! My technical knowledge is okay, but not enough to figure this out.

If you need more information - I am using "FAQ – Product Questions & Answers (Q&A)" from PrestaHero.

Edited May 3 by ignas04
Adding quote (see edit history)

[ignas04]

Hello El Patron!

Thank you, our team figured it out!

Have an amazing day!!

Best regards

IP.