search

utterance / utterances

:crystal_ball: A lightweight comments widget built on GitHub issues
https://utteranc.es
MIT License
8.7k stars 565 forks source link

Size Adjustment? #160

Closed taeshahn closed 5 years ago

taeshahn commented 5 years ago

Hello, Is there a way to adjust size of utterances?

Thank you :)

summerandwinter commented 5 years ago

awesome

jmau111 commented 5 years ago

@ts-han @summerandwinter I use this : 

 .utterances {
      max-width: 100%;
 }
taeshahn commented 5 years ago

Thank you, @jmau111 It works perfectly!

AurelienDud commented 3 years ago

Hello,

Override works, of course, but overriding is not a clean way of doing things.

The element with the class name ".utterances" is just a container around the iframe. It does nothing essential.

Maybe these styles could be just mentioned in the documentation for those who want to use it and thus let others decide how to implement the plugin in their websites.

Thanks for the project.

jdanyow commented 3 years ago

Customizing the .utterances element is the recommended way of adjusting the component to fit within your site layout. Documented here: https://utteranc.es/#heading-enable:~:text=Customize%20the%20layout%20using%20the%20.utterances%20and%20.utterances%2Dframe%20selectors

AurelienDud commented 3 years ago

Customizing the .utterances element is the recommended way of adjusting the component to fit within your site layout. Documented here: https://utteranc.es/#heading-enable:~:text=Customize%20the%20layout%20using%20the%20.utterances%20and%20.utterances%2Dframe%20selectors

What I mean is this is not reliable to base the style on overrides because people will have to set CSS to stylish their project but also to set CSS to unset something they don't need.

In addition the max-width is arbitrary set to 760px in order to follow Github design. But Github is not a framework and so people doesn't use its design on their websites. Even if this is Github Pages. And all the current CSS frameworks include containers settings upper than Github design.

This is why the recommanded way to design a component intended to be include in another style context is the fluid design. It is thus the responsability to the integrator to put the component into the good container in order to constrain it.

Hope my post will not be understood as rude. The project is good and is working well so I just want to help improve it.

jdanyow commented 3 years ago

@AurelienDud the width is not arbitrary, it's a best practice. Excessively long or short line lengths can be difficult to read. This is why utterances doesn't use a fluid width by default.

https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length