Shape 5

I have noticed that my pages are not displaying correctly on mobile devices http://www.stericom.com/

Is it because I have a written the text in a table with a fixed width of 660px?

Anyway I am trying to get the new site acceptable for mobile devices so any suggestions at all you can give would be really appreciated.

Thanks for your support!

J

The only thing I'm seeing on your site that isn't acting responsive is the Fader, and it looks like you have a fixed width of 1000px assigned to it.  If you remove that fixed width in the widget settings, it should resize with everything else.

Hi Tristan

Thanks for that. I have fixed it as you suggested. However, the internal pages still don't look good [http://www.stericom.com/coloproctology/rectoscopes/sterile-rectoscopy-kits/] - the text is going beyond the content area.

Is it possible to hide/remove a widget from the mobile version of the site?
For example I don't really think the tabshow widget on the homepage  looks good on a mobile and the sidebar on the internal pages is not necessary and just moves underneath the content area on small devices.

I have created a new menu and set it as the mobile menu. However the main menu still shows on my phone - how is this supposed to work?

Sorry to have so many questions, but I have never had to make the site mobile friendly before.

Your help is appreciated as always.



J

If you have fixed-width content, it won't be able to re-flow to fit the screen size.

If you have installed the Vertex Upgrade Patch (http://www.shape5.com/component/option,com_docman/Itemid,96/task,cat_view/gid,308/), you should have a "Responsive visibility classes" option on the admin side of each widget.  These classes will allow you to hide/show widgets on specific screen sizes; a full list of the options available as of the latest patch version is on the most recent demo: http://www.shape5.com/demo/wp/ambient/features/vertex-features/hide-content-and-widgets/

The mobile/responsive menu should appear when the screen width gets small enough to trigger it.  When I use mobile mode in Firefox, the mobile menu appears fine for me.

Thanks Tristan, I will have a look at this link later today.

Tables should never be used for content structure.  The only valid time to use tables is when you want to display an actual "table" (spreadsheet) of information.  By using a table for your entire layout, you're actually preventing the content from being able to "re-flow" for mobile.

You should be able to assign a different menu for the mobile position and just have different menu items on that menu.  If that's not happening, then it might just be an issue with the older version of the framework.  Patching the framework should fix any issues like that.

Thanks!

Hi Tristan

I read the link you sent earlier but I am having one problem:

http://www.shape5.com/demo/wp/ambient/features/vertex-features/hide-content-and-widgets/
 (http://www.shape5.com/demo/wp/ambient/features/vertex-features/hide-content-and-widgets/)
Hide Sections of the Theme via the Theme Configuration
This is the simplest way to hide an area of the theme is to use the theme interface to easily select areas of the theme that you want to hide on tablet sized screens (970px and less) or mobile screens (580px or less). Simply select the area that you want to hide and the Vertex framework takes care of the rest! These fields do work independent of each other, so if you want to hide something on both tablet and mobile sized screens you must select the same area on both fields.



Just under this text they show an image with an option to 'hide tablet divs' & 'hide mobile divs' - but I cannot find this in the New Vision theme. Can you help me out?

Thanks again

That section is referring to changing a setting in the theme options (Shape 5 Theme on the admin menu), I was suggesting to using one of the responsive classes lower on that page, and hiding the individual widget, rather than a whole section of your site.

OK understood. Many thanks.

Hi there.

I need to start a new topic but can't find the place to do it. I was playing around with the info slide javascript and tried to add a link to an image in a in bottom row 1.2.

It ended up corrupting the coding on the custom1 widget (image and content fader3). I have no idea how as I had not gone near that widget. The problem was that on chrome and safari the content fader image could not be seen, only the black box and text. However, it was working in firefox!

Also on all the other pages a thick blue line is at the top of the site instead of a thin line [http://www.stericom.com/coloproctology/proctoscopes/]

I got a site restore of both the database and the files but no joy. So in desperation(!) I de-activated the widget and then redid it. To my surprise it seems to have worked but there is one problem...the thick blue line is still at the top of the all pages. Can you help with this?

Thanks as always!

You have an empty text widget in Top Row 1.2, which is preventing that section of the site layout from collapsing.  Once you remove that empty widget, the blue space will collapse as intended.

To start a new thread, just go to the correct board for the theme/plugin you are referencing, and click the "New Topic" button.

Fantastic! thanks a mil.

Hi there and a happy new year to you all :)

I noticed on mobile sites that I cannot expand an area of the page to make it larger whereas I can do this on most other websites. It does not respond - is there something I can do to change that?

Thanks

Can you provide a link to an example of the problem you're having?  The demo resizes fine for me, so I'll need to see what is happening on your actual site.

Hi Tristan

It's not really something I can link to. I probably didn't explain the problem correctly ::)

On a phone or ipad you can expand the size of the text/focus on an area of the page by using the thumb and forefinger in an inward/outward direction. I can do this for most websites but not on our one. I thought perhaps there was a setting I could change? Although I tried it on the New Vision demo site and it did not work either but it did on some other of the demo sites. I hope that explains it better!

Thanks as always

J

If you have updated to the latest Vertex Upgrade Patch (http://www.shape5.com/component/option,com_docman/Itemid,96/task,cat_view/gid,308/), there is a setting under Main -> Responsive Layout called "User Scalable on Touchscreen".  I believe that is the setting you are looking for.

Great. Thanks Tristan.