Encounters Mobil responsiveness

[Julie]

Hi

I thought Encounters was mobile responsive? My site is not looking very good on iPad or iPhone? I noticed the Encounters Demo site is not appearing responsive either. Is there something I need to do to correct this?

Thanks,

Julie

[Sushil Adhikari]

Hi Julie…. it should be responsive. What is the link to your site? Also, what parts are you finding are not responsive?

[Julie]

It is http://www.thebeautyisse.com

I currently have an under construction plugin activated but I will deactivate so you can view later today… But as I mention your demo site was behaving in the same way????

Thanks

[Julie]

Sorry typo… http://www.thebeautyissue.com

[Sushil Adhikari]

Hi Julie… thanks for the link, although I got to your coming soon page. Anyway, are you referring to the slider which I just noticed myself? That one I see not behaving, so this boy will be fixing this tonight and get this working correctly. Did you come across anything else not responsive?

[Julie]

Hi there

Well, it was my home page, the menu shifted one item down, which shifted the logo up. This was looking at it via iPad, but my sister took a look with iPhone and that was really all over the place… it looks great (even though not finished by a longshot)on all over devices such as my Macbook and iMac…

I have just deactivated the underconstruction plugin.. but I think it’s getting late where you are..

Thanks again
Julie

[Sushil Adhikari]

There’s a couple little adjustments but please note that a responsive theme can be tested using this online tool: http://mattkersley.com/responsive/ which shows somethings needing the adjustments. However, there are other factors that determines when something in a page is to drop below as the browser window resizes, such as:

1. How big is the logo or site title
2. How big is the menu, a few or many menu items
3. Modifications or the type of content a user puts into a page…etc.

Responsive is not a 100% smooth transition from super wide to really small because this is based on what is called Media queries where css is used to determine when to switch to a different style for adjustment based on the size of the window. It’s almost impossible to have it so that is adjusts on a per pixel-by-pixel basis, so media queries are done in batches of widths of minimum to maximum. This is usually a common set:

[code type=css]
/* Large desktop */
@media (min-width: 1200px) { … }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { … }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { … }

/* Landscape phones and down */
@media (max-width: 480px) { … }

Now the only big problem is the padding you put on the showcase container which is very extreme. So this gave it a fixed oversized dimension which breaks the mobile view because normally the showcase should have a responsive slider or image and not to be used in the way you have used it. I would recommend replacing that with an image or slider that is responsive to solve one problem or put the text in a div container with an inline style of text-align: center. I looked at your site on my iphone and everything looked fine except that one issue.

Regarding the menu, it’s very difficult to judge what 1000’s of people will be using for a menu (as in how many menu links will be on it) because a theme has to try and accommodate most if not all but cannot really provide a true 100% gamut of responsiveness. But even though that site that displays a site in various window sizes doesn’t show one menu item dropping down, it does it when I manually shrink the browser. So my question for you is, does this happen to you on an ipad only, and were you viewing it in portrait or landscape?

However, based on everything so far , I have found some things that needs adjustments, including the Widgetkit slider on my demo site definitely needs some attention for responsiveness. I will be working on the adjustments today. Not sure how much I can do for your menu issue, but will try my best without sacrificing too much for others as well.

Unfortunately I do not have an ipad so I will have to rely on you to provide me feedback.

[Sushil Adhikari]

Quick update… I’ve been working on the changes needed, and so far it’s looking good, but I cannot do anything about your menu with the one item dropping down on the end. The size of your menu is sort of between the point of staying in normal mode and when it’s about to switch to the mobile view. This is where if you need it do stay or switch to the mobile menu at that point, then custom coding is required for your specific needs.

[Julie]

Hiya,

I fixed the showcase banner, the reason I changed it was because originally I did not realise I had the choice between banner and showcase. I have also limited my menu bar to 4 instead of 5 items.

Just changing those two things has seemed to fix the problem.

Just on the subject of the banner versus showcase, I have a question. How do I assign the banner and showcase to various pages? Or in some case not have it at all?

Thanks

Julie

[Sushil Adhikari]

Hi Julie….first up, I actually uploaded a new version of Encounters which helps with some of the mobile styling on elements such as logo and menu to be centered on smaller screens. Anyway, to control/manage where widgets are shown, the plugin called Dynamic Widgets is what I use, which I have a video tutorial for that one.

https://www.styledthemes.com/encounters-theme-setup/133-how-to-publish-widgets-to-select-pages

So because the showcase and banner uses widgets as they are widget positions, the video will help you with this one.

[Julie]

Hi again

Just checked out my showcase banner on iPad and text is far too big woth in the banner is far too big… Checked your demo site for Encounters Pro and doing and same problem? Is it my iPad 😛

Hope you can help…

Julie

[Author]

Posts