Shape 5

Joomla Templates => CleanOut - Club => : dismacon March 28, 2015, 11:58:45 AM



: Mobile display problems
: dismacon March 28, 2015, 11:58:45 AM
Dear S5-Team,

I still have some problems in the mobile versions of my pages (although Google says its perfect ;-)):

- Big white gap between Fader and first text block - how come? Furthermore the text overlays heavily and the pictures become quite small (interesting to see that there are some "jumps" if you examine that in Chrome on the desktop). Is it possible to more "zoom-in" or something?

- your module "Get to know our Team" does not re-arrange vertically, so that text under the pictures overlap. Any solution?

- Multi-Language: I already started a post to ask where to put the flags on the desktop-version. But what about the mobile version?

- search function in the mobile menu: I have no search function in the desktop version. Why is it active in the mobile version?

- I like the "Up-Arrow" of the mobile version. How can I integrate it into the desktop version as well? (ok, doesn't really fit here, but...)

Thanks for your advice.
Falk


: Re: Mobile display problems
: jonahh March 31, 2015, 02:16:49 PM
Hello,

Before I start answering these can you please post a URL to your site so I can take a look at this first hand?

Thanks,


: Re: Mobile display problems
: dismacon April 01, 2015, 01:34:00 AM
www.dismacon.de (do not worry about the German-English text mash-up - I am still working on that one...)

One more thing: The social buttons do not appear on the mobile version.


: Re: Mobile display problems
: jonahh April 01, 2015, 07:13:32 PM

1. Big white gap between Fader and first text block - how come? Furthermore the text overlays heavily and the pictures become quite small (interesting to see that there are some "jumps" if you examine that in Chrome on the desktop). Is it possible to more "zoom-in" or something?

The jumps are due to the JavaScript, CSS adjusting to various screen widths.  I recommend adding the following which will make the image allow for a taller height:

:
.jdGallery .slideElement {
    background-size: cover !important;
}

Then add the below to the s5_responsive.css file and change the height to whatever you desire.  You'll have to add to a section in the s5_responsive.css file that you desire this to take an affect at.  So perhaps in this section:
:
@media screen and (max-width: 750px){
Or you can add multiple sections too with alternating heights.  Might have to play with it a bit until you get it where you like it.  But this should head you in the right direction.

:
.jdGallery {
    height: 254px !important;}


2. your module "Get to know our Team" does not re-arrange vertically, so that text under the pictures overlap. Any solution?

The best method would probably be to either hide the text with our responsive hide classes here:

http://shape5.com/demo/cleanout/index.php/features-mainmenu-47/template-features/hide-content-and-modules

Or grab the code from any new template with the team page and then grab the CSS for it in the editor.css file:

http://www.shape5.com/demo/eventfull/business/index.php/pages/team

3. Multi-Language: I already started a post to ask where to put the flags on the desktop-version. But what about the mobile version?

You can enable side bar for mobile layout vs the current drop down layout.  Then you will have 2 positions "sidebar_top" and "sidebar_bottom" which you can publish to there then.

4. search function in the mobile menu: I have no search function in the desktop version. Why is it active in the mobile version?

The mobile version is pretty much default in Vertex, meaning it looks the same from template to template and has the same functions.  You can disable this but sometimes the template doesn't have a special search position built into the header area.

5. I like the "Up-Arrow" of the mobile version. How can I integrate it into the desktop version as well? (ok, doesn't really fit here, but...)

There is no easy way to do this without custom coding it.  You could post in the hire a coder area

6. One more thing: The social buttons do not appear on the mobile version.

This is because they are hidden in the s5_responsive.css file. You would have to remove this there:

:
@media screen and (max-width: 1050px){

#s5_socialicons  {
display:none;}

}


Hope this helps, also I noticed you have an older version of Contact Popup installed.  I recommend updating this and you'll get the checkbox version now show on the Blue Group demo and here on our site.

Regards,