Making embedded JavaScript based discourse commenting responsive

I use discourse as the commenting system and here’s an example

When you look at it from a mobile, you can see the content outside of the viewport.

How can I fix it to be responsive?

Here’s the code I use

<div id="comments" class="ct-post-end-section">
	<div id='discourse-comments'></div>
	<script type="text/javascript">
	  DiscourseEmbed = { discourseUrl: 'https://comments.alittlebitofspice.com/',
                     discourseEmbedUrl: '<?php echo get_permalink(); ?>' };
	  (function() {
	    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
	    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
	    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
	  })();
	</script>
</div><!-- #comments -->

It’s looking ok in my phone

Only the orange button “Add Comments, your recipe pics, ask questions” is broken, which you can shorten the text and the floating search bar look bad.

4 Likes

Thank you. Can I make the “Add Comments, your recipe pics, ask questions” multiline? My audience is 40+ non techie stay-at-home moms - I need to articulate the CTA well.

The floating search box is up for a fix.

You can add CSS for the embedded comments in the Embedded CSS section of your Discourse theme. Try something like this for the button.

.discourse-embedding .button {
    white-space: normal;
    text-align: left;
    margin-right: 8px;
}

Tested in my web browser’s dev tools, that gives me this:

8 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.