Jump to content
Sign in to follow this  
ededi

[SOLVED] listing module on responsive ( mobile devices)

Recommended Posts

please look attach

 

i hv choose Horizon sliding with 6 columns with 6 results per page with max 15 results

 

in responsive it looks like vertical sliding 6 rows

 

how can i show 2 images besides in horizon or one at least

post-25782-0-44370900-1496860909_thumb.jpg

Edited by ededi
solved

Share this post


Link to post

You can't choose the number of columns and/or results per page to display on smaller screens. In this case, I recommend you create two separate modules. One that has settings appropriate for desktop display and the other one for mobile, and then use template settings to show or hide the module depending on the screen size.

Share this post


Link to post

thx shall try

but can u help me which code can i use to hide or where is that settings

and then use template settings to show or hide the module depending on the screen size

Share this post


Link to post

Sorry but i see know that ihv not fixed this issue

İ will on mobil at least 2 columns besides like image above 

Mobile has own module hidden for desktop but you wrote then use template settings , can u maybe explain this 

2 columns 4 articles to show but it loading vertical 

On pc no problem it works horizontal in own module 

Share this post


Link to post

Since the modules don't have mobile specific settings, the mobile theme file includes code that automatically adjusts the settings for mobile devices. That's because a module that displays fine with 6 columns on desktop will not display correctly with 6 columns on mobile, and so on.

This is what the code looks like in the module theme file and you can change that to suit your needs. The $module_id is defined above the code shown below, so if you want to create different mobile setting overrides for columns and number of results per page for different modules you can use the $module_id in the if statement as well.

/components/com_jreviews/jreviews/views/themes/default/modules/listings.thtml

if ($isMobile)
{
    // Show 1 listing in 1 column on mobile devices
    $columns = 1;
    $limit = 1;
}

For specific modules:

if ($isMobile)
{
	switch ($module_id) {
	   case 1:
          	$columns = 3;
          	$limit = 3;
		break;
	   case 2:
          	$columns = 2;
          	$limit = 2;
		break;
	   default:
          	$columns = 1;
          	$limit = 1;
		break;
	}
}

And the "case #" represents the module ids 1,2 so you have to update those numbers to match your module ids.

Share this post


Link to post

see pic

no any changes after edited file in listings.html all caches are cleared each time after trying

and after that i added above code for specific module with id also not showing correct

 * 								CONFIGURATION AND SETUP
 **********************************************************************************/

$isMobile = Configure::read('System.isMobile');

$module_id = Sanitize::getVar($this->params,'module_id','');

extract($this->params['module']);
if ($isMobile)
{
	switch ($module_id) {
	   case 563:
          	$columns = 3;
          	$limit = 3;
		break;
	   case 2:
          	$columns = 2;
          	$limit = 2;
		break;
	   default:
          	$columns = 1;
          	$limit = 1;
		break;
	}
}

if ($isMobile)
{
	// Show 1 listing in 1 column on mobile devices
	$columns = 3;
	$limit = 3;
}

 

sillllllll.png

Share this post


Link to post

In your screenshot it says "no device detected". Just making the window small is not enough to simulate a mobile device. You need to select a device from the dropdown list or test directly on mobile.

Share this post


Link to post

As opposed to? What is the link to the page and the module? You need to do some troubleshooting to see if the values you expect for column and limit are the ones being used. So inside the if ($isMobile) statement right before the closing curly brace, you can echo those values:

<?php echo 'columns ' . $columns. ' - limit :' . $limit; ?>

In the code you wrote in your previous post you have the code I gave you and also the code below it with values 3/3 which is going to override all values. Make sure you put the line above after all of that so that you can see the values used for columns and limit. And also make sure you don't have caching enabled when testing this.

Share this post


Link to post

Your code is not only wrong, it also has syntax errors. You have to replace:

if ($isMobile)
{
	// Show 1 listing in 1 column on mobile devices
	$columns = 3;
	$limit = 3;
<?php echo 'columns ' . $columns. ' - limit :' . $limit; ?>
}

if ($isMobile)
{
	switch ($module_id) {
	   case 596:
          	$columns = 3;
          	$limit = 3;
		break;
	   case 2:
          	$columns = 2;
          	$limit = 2;
		break;
	   default:
          	$columns = 1;
          	$limit = 1;
		break;
	}
}

See above you have two conditions for $isMobile which doesn't make sense. Instead, use only:

 

if ($isMobile)
{
	switch ($module_id) {
	   case 596:
          	$columns = 3;
          	$limit = 3;
		break;
	   case 2:
          	$columns = 2;
          	$limit = 2;
		break;
	   default:
          	$columns = 1;
          	$limit = 1;
		break;
	}
}

echo 'is mobile ' . (int) $isMobile . ' columns ' . $columns. ' - limit :' . $limit;

I got your ticket, but you have to fix the code.

Share this post


Link to post

I see what's causing the problem now. In addition to the theme variables, there is CSS forcing the width of each item to 100% on mobile. That is to complete the solution because to be honest, most of the time multiple columns don't look that well on mobile. I am going to remove the CSS on my end for the next update, but for yours now you will need to add CSS to set the width manually. I added a new module suffix to your module settings called "news-test" so I can target that module specifically like this:

.news-test .jrModuleItems .jrListingsModule .jrModuleItem {
    float: left;
    width: 32%!important;
}

 

Share this post


Link to post
On 10/9/2018 at 12:30 PM, Alejandro said:

I see what's causing the problem now. In addition to the theme variables, there is CSS forcing the width of each item to 100% on mobile. That is to complete the solution because to be honest, most of the time multiple columns don't look that well on mobile. I am going to remove the CSS on my end for the next update, but for yours now you will need to add CSS to set the width manually. I added a new module suffix to your module settings called "news-test" so I can target that module specifically like this:


.news-test .jrModuleItems .jrListingsModule .jrModuleItem {
    float: left;
    width: 32%!important;
}

 

thanks now it works  and i added origin file of listings.html with code below because in other code , layout is ok but a text is shown above title (see mine prev posted image there is also)  is mobile columns 0 ...

so i use this with css you wrote thanks again

if ($isMobile)
{
	// Show 1 listing in 1 column on mobile devices
	$columns = 1;
	$limit = 1;
}

 

Share this post


Link to post

im back 😕 i see now its not ok ( cleared all cache try on pc responsive , safari and chrome on mobile seems all ok and installed firefox mobile and it seems not ok there so i  cleared again now also not showing correctly on other explorers )

mine fault i must start from begin and i must add all codes you gave me thanks for warning but it works

if u ask me why i removed code because of ; see pic,  that txt was showing when was ok with all codes but i must try from begin

sillllllll.png

Share this post


Link to post
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.