Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#198837

I have responsive mode turned on and the site is serving up the LESS files to mobile devices. But on iPhone the layout does not resize to fit the screen. You have to move the screen around to see the whole page. The menu and everything else does work fine and it looks pretty good all in all. The pictures scale etc. But shouildn’t the pages themselves be resizing to fit the layout? On open shouldn’t the user see the entire front page, instead of just the left-hand portion? Where is this controlled and how to fix?
Thanks,
-Jim G.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#538995

Hi Jim,

If you customise LESS file in your site, pls make sure that you compile LESS to CSS then (Remember to backup all current CSS files first as when compiling, they would be ovveridden).

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#539103

Thanks, but is this why the layout isn’t scaling properly? I really don’t want to “compile.” I tried it once and it didn’t work. All I got was an error message and frozen control panel. Yes I have saved all my customizations to the custom.css file. Really all I want is to make the site render/scale properly for smart phones. Any thoughts are appreciated.
-Jim G.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#539795

Hi Jim,

Do you have any customisation in the LESS file?

You can PM me ftp login info of your site, your custom code may effect the layout in mobile view.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#539882

No, Sagiaros, don’t have any custom code. I will e-mail you the back-end access. The site has the new extplorer installed to access files.
-Jim G.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#539951

Hi Jim,

The problem comes from your custom code, please have a look again at this file: /templates/ja_biz/css/themes/blue/custom.css
You define the width for the container is: 1175px – this is too big in small view port, you should use media jQuery to add specific css rule for specific screen size. I temporarily comment this rule, please try to edit again to suit your need.

I also add additional rule into this ‘custom.css’ file:

@media (max-width: 768px){
.t3-slideshow .custom.custom img {
width: 100%;
}
}


[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540032

Hi Saguaros,
I put that custom code there because the customer wanted to shrink the gutters and make the template width smaller. This was the only easy way I could find. Is there another way to reduce container width while not affecting mobile view? Your change has indeed fixed the mobile view. Maybe the customer will be satisfied but I anticipate they will renew their request to reduce template width in desktop view. Can I not control desktop and mobile view independently?
Many thanks as always,
-Jim G.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#540083

Hi Jim,

As I mentioned in my last post, you can use media jQuery to add specific css style for specific screen resolution.

You can have a look at this tips: http://code-tricks.com/css-media-queries-for-common-devices/

Hope it helps.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540172

Thanks, yes, I am aware of this nuance now and will give it a try.
-Jim G.

[Author]

Posts