# Making embedded JavaScript based discourse commenting responsive

**URL:** https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039
**Category:** Support
**Created:** [December 11, 2018, 6:51pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039 "2018-12-11T18:51:00Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Jane\_Jojo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jane_jojo/32/119485_2.png) [@Jane\_Jojo](https://meta.discourse.org/u/Jane_Jojo)
#### Post date: [December 11, 2018, 6:51pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039/1 "2018-12-11T18:51:00Z")

</div>

I use discourse as the [commenting system](https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963?source_topic_id=74803) and here’s an example

> **[Soya Chunks Masala Dry](https://alittlebitofspice.com/soya-chunks-masala-dry-recipe)**
>
> Learn how to make Soya Chunks Masala Dry, a healthy stir-fry with soya chunks cooked in spices and chilies. A flavorful side dish .

 ![IMG_1857](https://global.discourse-cdn.com/meta/original/3X/4/4/44add3f1814820d1c38c16727bbac1b4f7522059.png)

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

```

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [December 11, 2018, 6:57pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039/2 "2018-12-11T18:57:16Z")

</div>

It’s looking ok in my phone

 ![Screenshot_20181211-165659_Chrome](https://global.discourse-cdn.com/meta/original/3X/9/f/9fbbe707ccb8d1b9f6c6c05ededbd8a76c6a44d7.png)

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.

---

<div class="post-metadata">

### Author: ![Jane\_Jojo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jane_jojo/32/119485_2.png) [@Jane\_Jojo](https://meta.discourse.org/u/Jane_Jojo)
#### Post date: [December 11, 2018, 7:14pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039/3 "2018-12-11T19:14:31Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [December 11, 2018, 7:30pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039/4 "2018-12-11T19:30:34Z")

</div>

> [@Jane\_Jojo](#):
>
> 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.

```plaintext
.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](https://global.discourse-cdn.com/meta/original/3X/8/e/8e075b9d0fb97f268def0f31928d0e4958e79d6f.png)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [January 10, 2019, 7:32pm UTC](https://meta.discourse.org/t/making-embedded-javascript-based-discourse-commenting-responsive/104039/6 "2019-01-10T19:32:52Z")

</div>

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