Basket layout is not adaptive to mobile view...

kupaladen

Hi!
The basket table and order steps goes beyond the mobile devices screen:
Original Fixel demo site: https://www.joomlart.com/demo/ja-fixel

My site (all the same):
https://snag.gy/bVmr3k.jpg
https://snag.gy/tycjRe.jpg
Joomla: 3.9.8
JA Fixel: 1.1.8
Joomshopping: 4.18.3
Please help me to adapt it for mobile layouts.

saguaros

kupaladen

Hi,

I check your site and see that the table doesn't have responsive class so it doesn't look like our demo site.

You can share the admin + FTP account of your site, I will check further for you.

kupaladen

Hi, saguaros!
Please, check access to the site.
But note, that the basket on your demo site also does not fit into the screens of mobile devices (see the screenshot - the button for deleting products goes beyond the screen and the products cannot be removed from the basket without turning the smartphone to horizontal ...)

Please post your CSS code changes right here - I think many users of the FIXEL template has the same problem!

teitbite

kupaladen Hi. Please try add this to custom js field:

<script type=“text/javascript">(function($) {$(document).ready(function() {
$('table.jshop').each(function(){
$(this).wrap('<div class="table-responsive"></div>');
});
});})(jQuery)</script>

kupaladen

teitbite
It looks like the FIXEL has no custom java code insertion options:
https://snag.gy/sb85ow.jpg

saguaros

kupaladen

Hi,

I see the responsive class now, is that solved?

kupaladen

saguaros
No, because the problem is in the FIXEL template (theme) for Joomshopping. It has only horizontal table layout for all screen resolutions and because of it don't fit into the screen. But "Default" Joomshopping theme works good and has vertical table layout for mobile view (see screenshots):

teitbite

kupaladen Hi. Fixel has a left-right scroll implemented for mobile in tables, but it has to recognize it first. Please add my script to Joomla template. If it's not our product than please ask its developer how to add this script between <head></head> tags.

Small correction to my script:

<script>(function($) {$(document).ready(function() {
$('table.jshop').each(function(){
$(this).wrap('<div class="table-responsive"></div>');
});
});})(jQuery)</script>

kupaladen

teitbite
Oh yes, it works!
Thank you so much.