How can I display images in grid view on mobile using the Publisher theme?

[MiaPascua]

Hi,

I'm using the Publisher theme and I would like to have the images in these 2 pages in grid view instead of a straight line.

See links below:
https://everlyadorned.com/products/permanent-jewelry-appoint.
https://everlyadorned.com/pages/find-your-wrist-size 

We'd like to make it look like the screenshot below, with the texts still readable in mobile:

[NomtechSolution]

To create a grid view for images on your product and page templates, you will need to modify the HTML and CSS code of your theme. Here's a general approach you can follow:

1. Locate the corresponding template files for the pages you mentioned. In the Publisher theme, you can typically find these files in the "Sections" or "Templates" folder within the theme editor.
2. Open the template file that corresponds to the page you want to modify.
3. Identify the code responsible for displaying the images. This may vary depending on how your theme is structured, but it's likely to be within a loop or section that outputs the individual images.
4. Modify the HTML structure and CSS styles to create a grid layout. You can use CSS grid or flexbox to achieve the desired grid view.
5. Adjust the CSS styles to ensure the images and text are readable on mobile devices. You may need to set appropriate width, height, and responsive styles to ensure a good user experience.

[MiaPascua]

Thanks for the reply. Is there a code I can copy and paste to make this happen?