Making embedded JavaScript based discourse commenting responsive

Product Support

AI-generated summary

The discussion revolves around making embedded JavaScript-based Discourse commenting responsive. Jane_Jojo is using Discourse as a commenting system on her website and is experiencing issues with content overflowing outside the viewport on mobile devices. She shared her code and a link to her website for reference.

Falco suggested that the issue might not be with the commenting system itself, but rather with specific elements such as the “Add Comments, your recipe pics, ask questions” button, which is broken, and the floating search bar, which looks bad.

Jane_Jojo asked if it’s possible to make the button’s text multiline to better articulate the call-to-action for her audience. simon provided a solution by suggesting adding CSS to the Embedded CSS section of the Discourse theme to make the button’s text wrap to multiple lines.

1

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

IMG_1857
IMG_1857566×1225 238 KB

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 -->
2

It’s looking ok in my phone

Screenshot_20181211-165659_Chrome
Screenshot_20181211-165659_Chrome1080×2246 302 KB

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.

3

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.

4

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:

26%20AM
26%20AM366×644 101 KB