Jane_Jojo
(Jane Jojo)
December 11, 2018, 6:51pm
1
I use discourse as the commenting system and here’s an example
Soya chunks or meal maker cooked with chilly and spices. This soya chunks masala dry / stir-fry recipe is an easy, healthy and tasty side-dish. It goes well with rice, chapathi, and any Indian bread.
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
(Falco)
December 11, 2018, 6:57pm
2
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
Jane_Jojo
(Jane Jojo)
December 11, 2018, 7:14pm
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.
simon
December 11, 2018, 7:30pm
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:
8 Likes
system
(system)
Closed
January 10, 2019, 7:32pm
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.