Client Area Un-Responsiveness (some elements)

Hey! The control panel button are not quite responsive on mobile phones, I would like to share the responsive code that I edited, would admin like to see?

Sure, please do!

<div class="list-group-item">
<div class="row">
<div class="col-lg-4 col-md-4 d-grid">
<a href="#" target="_blank" class="btn btn-success btn-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tool" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"></path>
</svg> Control Panel</a>
</div>
<div class="col-lg-4 col-md-4 d-grid">
<a href="#" target="_blank" class="btn btn-warning btn-lg"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"></path>
<polyline points="9 15 12 12 15 15"></polyline>
<line x1="12" y1="12" x2="12" y2="21"></line>
</svg> File Manager</a>
</div>
</div>
</div>

I hope you can implement this code in the client area.

I can’t implement that code, because the HTML you’re sharing is processed data, which is different from the templates that are implemented in the code.

It would help me a lot if you could just tell me what to change instead of giving me a blob of HTML, without any explanation where this code came from or what’s different.

Ok, I will check and tell

The problem is in btn-lg (large button)
because the font is larger to be readable and has a lot of text
and for that reason it breaks on devices with low resolution (unless they turn the device horizontally, which is recommended anyway)

One could simply reduce the font size for that button so that everything fits in the container but the text would be too small to read


I have two simple solutions (I don’t see anywhere in CA that there is a conflict, but checking it out is a recommendation)

  1. override rule white-space:nowrap in white-space:normal

OR

  1. override rule padding: X Y to padding:5%




How it looks can be seen here

VIDEO



FIX

In tabler-core.css

find this media selector for low resolutions and choose one of the offered solutions

@media(max-width:575.98px) {
  
.btn-lg{white-space:normal}   /*oxy dac */
  
.btn-lg{padding:5%}  /*or padding override*/




Various images during the investigation of what the problem is


see white-space at bottom = nowrap = problem


When I kill padding = nice

6 Likes

I made some tweaks so the buttons now folds below each other on tablet sized screens. This was the easiest solution that didn’t involve hacking the Bootstrap grid system, which I have really bad experiences with.

2 Likes

Looks nice, thanks!

4 Likes

@jaikrishna.t for a short time I changed the category of this topic
so we can give you solved as a thank you for pointing us to the problem.

2 Likes

Well, the credentials below those buttons are also out of place on mobile.

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