HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


<<resolved>> mobile browser issues

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#93386 (In Topic #18674)
Avatar

Fan in action

losing right hand side of site on Iphone / Ipad / Android

hi all, 

I am begging assistance once again!!!


I have problem with looking at the site in my mobile phone browser, the page loses the right hand 25-30% and there is no left to right scrolling.

Is there anything i can do about this, it has been tried on android, iphone and ipad!



:thumbs: I will sing you love songs if you help :)  :thumbs:


Last edit: by GavMac
Back to the top
 
Posted
Rating:
#93388
Avatar

Could you post a URL to a problem page so I can test.

The default theme (and themes derived from it using the Theme Wizard) are designed to work well on mobile browsers. But it could be:
  • bug slipped in
  • somehow mobile mode not being detected
  • some kind of standards change we've missed
  • a change you've made to your theme
  • something else ;)


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#93391

Non-joined user

Chris Graham said

Could you post a URL to a problem page so I can test.

The default theme (and themes derived from it using the Theme Wizard) are designed to work well on mobile browsers. But it could be:
  • bug slipped in
  • somehow mobile mode not being detected
  • some kind of standards change we've missed
  • a change you've made to your theme
  • something else ;)


Hi Chris, sorry responding from my mobile… It is www.mynightmap.com, the first page loads great, click the drop down an go to Wakefield where you will see the problem, it's the same if you select 'not for mobile devices' at the bottom of the page. 

Thanks for your help :) 

Gav :THUMBS:
Back to the top
 
Posted
Rating:
#93393
Avatar

Ah right, that's just because you have a large image. I did a quick test and putting this CSS on it did make it scale: width: 100%; height: auto;


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#93394
Avatar

Well-settled

Where abouts do you put that code please? Inside the <img> tag?

Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
Posted
Rating:
#93395
Avatar

Community saint

djdaveyp85 said

Where abouts do you put that code please? Inside the <img> tag?

This image URL was probably added to a selector declaration such as html>body#main_website at around line 368 of GLOBAL.css.

Add those 2 properties 'width: 100%; height: auto;' within that selector.

However, I did visit the site with my iPad and Samsung Galaxy Note and saw none of the problems stated by GavMac. The site is appearing fully on the iPad with all navigation. On the galaxy cell phone the left panel menu appears below the website_inner, which is normal. On both devices, ocPortal's mobile-version was automatically triggered and by selecting the non-mobile button at the bottom of the page you get to see a fully working website on both devices if somewhat very small on the Galaxy.  
Back to the top
 
Posted
Rating:
#93399
Avatar

Well-settled

Have I done it correctly here? Doesn't seem to have made a difference. Thanks


Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
Posted
Rating:
#93406
Avatar

Community saint

This code: {+START,IF,{$CONFIG_OPTION,fixed_width}}{+START,IF,{$NOT,{$MOBILE}}}
will actually be in effect only if you have a fixed-width and non-mobile theme.

Since your theme is Fluid-Width your background image has also been inserted somewhere else in the css. I suspect maybe here: (add your width and height there like so if it is the case)

body#main_website #main_website_inner, html>body div.global_middle_faux {
background-color: {$GET,main_background};


background: url('{$IMG;,outer_background}');
width: 100%; height: auto;
}


However, the problem exist because your background image is so wide (1920px). There is really no need to have it of that width since it is composed of repeated patterns. You could just take a sample of it, say 800px wide or even less (much less) and have it repeated with this code:   repeat: repeat;  The background image will be repeated both vertically and horizontally to fill the page as needed. 

Hope this helps,
Jean
Back to the top
 
Posted
Rating:
#93421
Avatar

Well-settled

Thanks Jean. It's not the background image i'm having issues with.

It's the image displayed on this page (the tube-style map):

My Night Map - My Night Map

When you visit this page on a mobile device you can't scroll right to see the rest of it.

Is this affected by the background?

Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
Posted
Rating:
#93422
Avatar

Community saint

djdaveyp85 said

Thanks Jean. It's not the background image i'm having issues with.

It's the image displayed on this page (the tube-style map):

My Night Map - My Night Map

When you visit this page on a mobile device you can't scroll right to see the rest of it.

Is this affected by the background?


AH! I see!

I don't know how you've added this map image on your "WF" Comcode Page, but I've reproduced it (see my test site HERE) by using the Attachment option in the editor with the following params:
  • Display type: Embed directly (if possible)
  • Embed images as thumbnail: NO (uncheck)
  • Horizontal alignment: Place within content
  • leave Width and Height blank

This will create an 'Inline' image with 100% width at all times, even on the smallest smart phone screens.

Hope this helps,
Jean
 
Back to the top
 
Posted
Rating:
#93461
Avatar

Well-settled

Thanks Jean. Been away for a few days. Will take a look at that shortly :)

Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#93587
Avatar

Well-settled

Worked a treat  :thumbs:

Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
Posted
Rating:
#93592
Avatar

Community saint

Great!:thumbs:

Please do us a favor, and ask GavMac to edit his first post and add [RESOLVED] before the title to help people looking for similar solutions to find it better.

Thanks!
Jean
Back to the top
 
Posted
Rating:
#93593
Avatar

Fan in action

Jean said

Great!

Please do us a favor, and ask GavMac to edit his first post and add [RESOLVED] before the title to help people looking for similar solutions to find it better.

Thanks!
Jean

Will do it now and thanks Jean
Back to the top
 
Posted
Rating:
#93596
Avatar

Well-settled

We have now found another issue with this :D

When the image gets scaled on the device the map no longer works correctly. So I think we are going to have to not scale the image. IS there any way we can allow side scrolling on mible devices instead?

Check out my ocportal site: PrecisionRacingLeague.com which will always be on ocPortal - because it's awesome!
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: