Component area not displaying correctly on mobile

sjones54

Hi guys........I've installed IProperty into the Law Firm template and the property listings page is showing in 3 columns instead of 1 on mobile. And the property detail page is following the same pattern.

I've previously used this component many times with Shape 5 templates and this has never happened before, so I know it's not an IProperty issue.

Having said that, the way IProperty displays on Law Firm is far superior to what it ever did on Shape 5, with no irregularities on spacing and padding etc. Just this strange 3 column view on mobile.

The only change I've made so far from standard template setup is that the body width has now been changed from 1200 to 1500 in variables.less

Can you advise?

Thanks,

Pete

aman204

sjones54 Hi Pete,

As currently seen, Default Joomla template - Protostar has been assigned for the specific menu item in question.

Can you either assign JA Lawfirm or kindly let me know if I can assign the specific template enabling us to take closer look?

Ninja

sjones54
Hi
I added this code in /css/custom.css file to fix this issue

@media(max-width:468px){.ip-overview-grid.span4 {width:100%}}

Regards

sjones54

Thanks......but I notice body width has now been reverted back to 1200 instead of 1500.

And the individual property view is still not showing correctly:

https://www.spainwebdesign.net/property/properties/property/382-village-house-in-granada-granada

Compare this to Shape 5 view:

https://www.findspain.net/sol/properties/property/382-village-house-in-granada-granada

Ninja

sjones54
Hi
Temp. i turned off the development mode from template style options.
You can turn it On again to see applied changes in less files. Please note do not make changes in t3-assets file, as they are cached file and will be override after every new change in style.

Regards

sjones54

Thanks Pankaj!

So if I want to retain these changes when Development Mode is off, do I need to apply "Less to css"?

And this view is still not right?

https://www.spainwebdesign.net/property/properties/property/382-village-house-in-granada-granada

Ninja

sjones54
Hi
Compile Less to css from template style options.
Please explain the view issue you have on above page the issue of component areas is fixed.
If you applied changes in Less file, kindly compile the Less to css to see the changes.

sjones54

Hi Pankaj.......compare these two views of the same property detail page on mobile:

Joomlart

https://www.spainwebdesign.net/property/properties/property/382-village-house-in-granada-granada

Compare this to Shape 5 view:

https://www.findspain.net/sol/properties/property/382-village-house-in-granada-granada

Ninja

sjones54
Hi
Replace the older code with this attached

@media(max-width:468px){.ip-overview-grid.span4 {width:100%} .com_iproperty .row [class*="span"] ,
  .com_iproperty .row-fluid [class*="span"] {
    width: 100%;   }  }

Regards

sjones54

It's made no difference Pankaj......the Shape 5 view as above is how it should be.

Ninja

sjones54
Hi
Kindly check and add code carefully http://prntscr.com/nmculw
I can see you added only half code. Kindly add the complete code, save it.
Clear browser cache and check.

Regards

sjones54

That's in an image pankaj.......and it seems different code to the one above.

Can you list the full code again on here?

Thanks.

Ninja

sjones54
I added this code in custom.css file to fix it

@media(max-width:468px){.ip-overview-grid.span4 {width:100%} .com_iproperty .row [class*="span"] ,
  .com_iproperty .row-fluid [class*="span"] {
    width: 100%;   }  }

You clear browser cache and check the site, If still there is any issue pending, kindly provide a screenshot how you want to display. As both template are different, there can be some style differences.

sjones54

Many thanks Pankaj......that's perfect.

So in the future should I apply those changes to any other TA templates that I use for IProperty?

Ninja

sjones54

So in the future should I apply those changes to any other TA templates that I use for IProperty?

Yes you can use the code i suggested to apply same fix.
I am closing this thread as this issue is solved. Kindly open a new thread if you will face any issue in future.

Regards