codehike icon indicating copy to clipboard operation
codehike copied to clipboard

Published 20 hours ago • verified publisher icon code-hike

Responsive code window in mobile device ?

Open nurmohammed840 opened this issue 3 years ago • 3 comments
trafficstars

I don't know how to explain, But in this first example on mobile device, Font is very large (like 14) But I want to show 2nd example on mobile device, and hide scroll bar,

Documentation is not very helpful, And I have no idea what to do...

I also want to change button (next/prev) style.

I just want to show all code, without scrolling, On mobile like devices...

nurmohammed840 avatar Apr 23 '22 00:04 nurmohammed840

A live example of your issue would be helpful.

Have you tried adding custom CSS?

pomber avatar Apr 23 '22 12:04 pomber

Modified many internal CSS styles using, chrome dev tool. Like:

  • aspect-ratio in .ch-slideshow-slide style
  • height and width in .ch-code-scroll-content style
  • font size/width, line height etc... in .ch-code-scroll-parent style

Those style doesn't make it responsive, And I have very little knowledge about CSS

nurmohammed840 avatar Apr 23 '22 16:04 nurmohammed840

@pomber, Here is a live demo

On small screen (Mobile), There should be no scrollbar in code window, Also font-size is very large on mobile like device.

nurmohammed840 avatar Apr 25 '22 14:04 nurmohammed840