How can I make tables on Oreo 7 theme responsive on mobile devices?

Shopify Discussion
1

I am using the Oreo 7 theme and on the product page I added three one row, two column tables. These are not responsive on a cell phone so the images get really small. I’d like the row to wrap so they are in a column on smaller devices. Does anyone know how I do this? I have these on every product, currently over 450 products in the store.

Can anyone help?

desktop
desktop1537×1289 177 KB

cell
cell466×624 38.2 KB

2

  1. click on the “Actions” button next to the Oreo 7 theme. Select “Edit Code” from the dropdown menu. Look for the file that controls the product page template, which is usually named “product.liquid” or “product-template.liquid”.

  2. Identify the code for the tables: In the product template file, search for the code that generates the one row, two column tables. It might be in a section like “product-template.liquid” or within a product loop.

  3. Modify the table code for responsiveness: Wrap the table code with a <div> element and apply CSS classes to control the layout on different devices. For example, you can use the Bootstrap grid system classes to achieve a responsive layout. Here’s an example of how the code might look:


  <table>

    
  </table>