Making embedded JavaScript based discourse commenting responsive

Soutien
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_Chrome.png1080×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.

4 « J'aime »
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

8 « J'aime »
6

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