Making embedded JavaScript based discourse commenting responsive

[Jane_Jojo]

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

Soya Chunks Masala Dry

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

[Falco]

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.

[Jane_Jojo]

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.

[simon]

Can I make the “Add Comments, your recipe pics, ask questions” multiline?

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: