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.


Rendering a table of contents to show in mobile mode

Login / Search

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

Well-settled

I am trying to create a table of contents with 4 columns width, and I have used the WYSIWYG editor to create this.
In the first and the last column these hold images all of the same size (or at least all set to show the same size, if that makes a difference) and I have used the attachment feature to add these.

Its a pretty basic table and seems to show fine when looking on my desktop, but when viewing on my iPhone in mobile mode (with no side panels) it only shows the full sized first column, is this something I have maybe done wrong when adding the images, as I thought images added got resized automatically for mobile.

Any help or pointers from anyone who has done anything like this would be great.

Thanks Mark
Back to the top
 
Posted
Rating:
#96654
Avatar

it only shows the full sized first column, is this something I have maybe done wrong when adding the images, as I thought images added got resized automatically for mobile.

If you're authoring some markup (which essentially is what the WYSIWYG is for), it's up to you to ensure it fits on any device, because the browser or ocPortal won't know what you're trying to achieve visually. That may best mean doing it twice, using {+START,IF,{$MOBILE}}...{+END} around one and {+START,IF,{$NOT,{$MOBILE}}}...{+END} around the other. Or, you could write some CSS that targets the table and sets a max-width on the images, perhaps using responsive design techniques (targeting CSS rules to specific viewport widths).


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:
#96655
Avatar

Well-settled

Thank you for answering that Chris

I think the easiest and most simplistic way to achieve this (well for me anyway) would be to do as you have said and create a separate one for mobile viewing entirely

Thanks
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: