How to make a Source markdown stack responsive

Hi there. I’m currently giving my local community centre website a makeover. It’s a work in progress at the moment (but any feedback or suggestions are welcome).

My query is as regards the Google map near the contact details. I’ve pasted the url from Google Maps into a markdown stack, but it doesn’t shrink dow on a mobile. Is there any way I can get this to look a bit better?

The url is currently
Thanks in advance.

Your <iframe> code has a fixed width in it (600). Try changing that to 100%.

Brilliant Stuart - thank you. Did you have any thoughts about the site or how it might look better or be improved?

I think it looks great. Really nice and clean.

On the Clubs page though you seem to have added a separate grid stack for each row in a grid. This isn’t necessary. You are best just adding all related items into a single grid stack and then letting it set out the grid for you. I’d also maybe change those grids to have ‘column spread: centered’ as opposed to ‘edge-edge’. This will horizintally centre any odd grid items that you have.

Or alternatively, you could use Grid Plus for that whole page and add all items from all categories and then enable the inbuilt filter to allow the web page visitor to filter what they want to see (rather than using the buttons to scroll to the relevant sections).

1 Like

What great advice - Thanks Stuart. I’ll send you a link when it’s all up and running properly.



Stuarts suggestion was really good.

Sites great but I noticed that the email is visible, and it would be worthwhile obfuscating the email using Just use the link to paste in their email address and then copy the generated code and paste that in place of their email address in the text stack. Users will see the email address bit it will make it harder for bots to reap their email address.

1 Like

Great tip - thank you.