How can I add image icons to my sizing info page without altering CSS?

[Aryaluna]

Hi, I sell historical custom made clothes. Each measurement must be taken by the customer and the measurements depend on the type of clothing.

I have a page called “Sizing Infos”, where there is an intro explaination with general advices/rules on how to take measurements. After that I have 3 links wirh downloadable pdfs depending on what to look for (the pdfs number will probably increase in the future by 1-2). I do not like the page design. At all.

I would love to insert image cards instead of the pdfs (similar to the product section/collection section). To have the customer click on each card image and download the chosen pdf.

How could I do that? Is there a way to do it without modifying css?

Thank you

This is the page link: https://butterflygarmentscouture.com/pages/sizing-infos

The password is OtpD16

Theme is Debut

[Aryaluna]

Thank you. I succeeded in adding the button html images through the html section of the page. The issue I have right now is that On Mobile Screen the image buttons are shown with a different size (they are shrink vertically and as a result the words are shortened) and the buttons are placed in a vertical row which is quite annoying

[Aryaluna]

On Mobile phone (words exceed the frame and buttons are misplaced)

[Aryaluna]

On Desktop (buttons are placed like I want them and words are inside the frames):

Is there a section in CSS where I could perhaps change the buttons position and size only for this Page? thank you

[Sandeep81]

Hi Aryaluna,
Write your CSS inside the

{% if request.host contains ‘pages/sizing-infos’ %}

Write Css here

{% endif %}

and paste this into the liquid file where the section code has been written.

Thanks & Regards
Sandeep