FC template issues in mobile visualization

More
10 years 11 months ago #52636 by agnesch
Hello,

with relation to this topic www.flexicontent.org/phpbb/viewtopic.php?f=9&t=8053 , I have just installed FLEXIcontent v3.0 Beta2 version.

Consequently, I have noticed some issues in the mobile visualization of the website:
    1) the social toolbar goes over two and more lines and disappears in its box ("subtitle 1" position in customised "default" template) (Attachment mobile1);
    2) the image lightbox that pops up when the image is clicked is much bigger than the mobile screen and one has to move around the screen (with horizontal bars appearing in the browser) so as to find the X to close the lightbox window (attachment mobile2);
    3) the fields in the "top" position of the customised "default" template are not adapted for the mobile visualization and end up creating a very long second column as in the attachment (mobile3). This happens when the XHTML parameter is set in the corresponding Model. It does not happen when HTML5 is selected. However, I would like to leave XHTML selected, because otherwise the desktop visualisation changes (see attachment desktop1) and I don't like how it appears, unless there is some way to change the html5 visualisation as in the attachment.

Do you know how to fix these problems?
I'm no coding expert, but I can follow instructions fine.

Thanks!

Please Log in or Create an account to join the conversation.

More
10 years 11 months ago #52637 by agnesch
here is attachment desktop1 ;)

Please Log in or Create an account to join the conversation.

More
10 years 11 months ago #52639 by micker
At first how your joomla template ?
1 without link difficult to test
2 lightbox => change galerie js for your field (like facyn box)
3 for xhtml then html5 => html5 use bootstrap jquery = better responsive
you need to adapte your flexicontent template with media jquerie class

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
10 years 11 months ago #52642 by agnesch
Hello micker, thank you for your answer!

First of all, I have chosen fancybox for the image and it now shows fine both on desktop and mobile versions of the website.

This is the test site I'm working on: tinyurl.com/kmqyfyy

I have now set up the content type to html5, as you suggested, but I am no coding expert and I would not know where to intervene and what to write, in order to make the following changes:
    1) make the social toolbar not disappear below two lines (for the mobile version);
    2) move the "top" block of fields from below to next of the image and modify its width so as to make it in line with other blocks (for the desktop version);
    3) to make the table in the "description" position stretch to its full width (for the desktop version). Please note in this regard that for the table I'm using the following code:
Code:
<div style="width: 100%; overflow: auto;"> <table class="table-style style-colorheader" style="width: 100%;" border="0"> <thead> <tr><th>Prodotto</th><th style="text-align: center;">Capacità (lt)</th><th style="text-align: center;">Lunghezza (mm)</th><th style="text-align: center;">Larghezza (mm)</th><th style="text-align: center;">Altezza (mm)</th><th style="text-align: center;">Portata (kg)</th></tr> </thead> <tbody> <tr class="odd"><th>XXX</th> <td style="text-align: center;">0</td> <td style="text-align: center;">0</td> <td style="text-align: center;">0</td> <td style="text-align: center;">0</td> <td style="text-align: center;">0</td> </tr> </tbody> <tfoot> <tr><th>Scorri in versione mobile</th> <td colspan="5">XXX</td> </tr> </tfoot> </table> </div>
This code worked fine before upgrading to FC 3 beta 2, in the sense that it stretched the table to 100%. Now, this can only be achieved if some text is used in the same text area, as you can see for the first table in the link. What has been changed from FC2.2.1 to FC3 that has caused this change of behaviour in the "description" position of the default template layout?

Please help me fix these problems, thanks! :roll:

Please Log in or Create an account to join the conversation.

More
10 years 11 months ago #52648 by ggppdk
Hello

you can use a different template for mobile clients

-- enable "mobile layouts" parameter in component parameters (inside the 1st tab)

then in your
- content type configuration
- category configuration


you will be able to select a different layout, which you can customize to your needs


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star review. Thanks!

Please Log in or Create an account to join the conversation.

More
10 years 11 months ago #52650 by micker
you need to learn more about css ;)
1 need to recode it ... note simple work
2 just do a
Code:
<div class="flexi infoblock onecols group span7">
3 i recomend to use this plugin for better responsive table
www.web-eau.net/developpement/re ... les-editor
regards

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
5 years 8 months ago #78767 by philippeg
Hi,
i am trying to do the same think , have a different template for mobile and applied the recipes showed in this post .. but without success .. are ces aprameter always actual ??
Thanks
"you can use a different template for mobile clients

-- enable "mobile layouts" parameter in component parameters (inside the 1st tab)

then in your
- content type configuration
- category configuration


you will be able to select a different layout, which you can customize to your needs"

Please Log in or Create an account to join the conversation.

More
5 years 8 months ago - 5 years 8 months ago #78772 by ggppdk
Hello

i tested just now and it is working

but it could be that we need to update mobileDetector
because it is not detecting the mobile browser being used


please open a new forum topic

Update the Mobile Detect from v2.8.26 to v2.8.34
Please
1. use install via URL to install
github.com/FLEXIcontent/flexicontent-cck/archive/3.3.n.zip

2. Clean website cache

3. Force your mobile browser to hard reload the category view page
(e.g. try submitting the filter form)

Does it make a difference ?


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star review. Thanks!
Last edit: 5 years 8 months ago by ggppdk.

Please Log in or Create an account to join the conversation.

More
5 years 8 months ago - 5 years 8 months ago #78774 by philippeg
a bit crazy this morning trying to test tjhe solution it seems that the area disappear .. no more area where i can put the template mobile name
Last edit: 5 years 8 months ago by philippeg.

Please Log in or Create an account to join the conversation.

More
5 years 8 months ago #78790 by philippeg
No response at all why this area has disappear ?

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline
Save