Forms Loop and Header size on Mobile

[CordialGit]

I created this Page — https://charity.cordialtec.com.ng/donation/

But I have 2 issues I will like to get solved, based on this Page

1.) You can see that I placed 2 Forms on the Page, using their Shortcodes.

QUESTION 1:
How can I create a “Forms Archive Page“– where I can enter just one shortcode, and it will list out all the Donation Forms I have on my website in a Loop Array, without me needing to come and enter them one by one on a Page ?

2.) DONATION HEADER SIZE ON MOBILE
On Mobile Phone, the size of the Header is too large, and I will like to reduce it to 18 pixels.

Upon using the Browser’s Inspect tool, I saw the CSS rules, and tried to adapt it to Mobile, as seen below:

@media screen and (max-width: 600px) {
  .givewp-layouts-headerTitle h2 {
    /* Apply some styles */
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;   } }

Unfortunately, the code did not work!

QUESTION 2
Can you Please help me with the CSS Code that can help me reduce the Header Font size on Mobile to 18 pixels ?

Regards.

[jonwaldstein]

Hey @CordialGit

1. You can try our Campaign Grid or Donation Form Grid block / shortcode
2. Where are you inserting the CSS?

[CordialGit]

I can't use Gutenberg Blocks because my website's pages are made with Elementor: so it will make sense if there are Campaign Grid shortcode or Donation Form Grid shortcode.

Now, I have looked through all the Shortcodes, I couldn't find anything like "Donation Form Grid shortcode", but I did find the "Form Grid Shortcode".

Just that it looks a bit blank, and so simplistic: the "Donate" link doesn't look like a button, and I will like to make it look like a button, plus be able to add description to the Grid card.

How do I do that ?

2.) I am adding the CSS through WPCode plugin. For better clarity, this is the Page -- https://yourcommunityyourspace.org/donation/

Probably you will be able to find the correct CSS by seeing the page I intend to use it on.

Regards.

[jonwaldstein]

@CordialGit

1. We have shortcodes for give_form_grid you can see options here there is also a givewp_campaign_grid shortcode as well.
2. You're css will work but our forms inside an iframe so you have to add the css to ether the global css options or in the form settings

Global css options:

Per-form css options: