Jump to content

Archived

This topic is now archived and is closed to further replies.

Andrew

Pre-release mobile review

Recommended Posts

Andrew

Hey guys, 

Ahead of the upcoming launch that is a few days away, we're doing a review of all mobile issues inside of #PL5. 

Please post anything you've noticed here along with screenshots and anything else we could use to recreate the issues. 

In development, we've primarily used Chrome tools which don't catch everything.

With this, we are priming the emulators and gonna do everything comprehensively.

Share this post


Link to post
Share on other sites
Gavin_

1. Using Footer Background Color in mobile there is a gap to the right of screen that shows page background color. 
It is not visible if section added to footer removes all padding etc 
Is visible if section added to footer is not set to be full width


Using the Footer color option in
Customise > Colors & Background > Footer

 

 
  •  

2. Add boxes to page template 

create 6 boxes 
columns 4/12
icon on top 
center content 
padding
margin 1 3 1 3 
grid 10 offset 1 

in mobile view the first and last boxes are off center. 

could there be an option to remove padding/margin on mobile ? 

this is on iPhone 4 + 5 

Screenshot of footer bg issue 

Screen Shot 2016-02-11 at 14.52.53.png

screenshot of boxes alignment issue

Screen Shot 2016-02-11 at 14.55.00.png

Share this post


Link to post
Share on other sites
mnagillum

Tangram Carousel looks great on a computer but comes across on mobile as a thin ribbon. Any workaround for this?

Thanks.

IMG_3157.PNG

Share this post


Link to post
Share on other sites
Andrew

@mnagillum yes, fixed this and pushed a build. Reduced to 2 images at mobile dimensions

@Gavin_ yes, sorta duped the boxes issue and fixed/pushed. Icons now respect the width option.  Couldn't dupe the other one with the information given.

Share this post


Link to post
Share on other sites
JudithKlinger

Pullquotes not displaying properly. 

URL: http://www.w-edigest.org/gardenofmanyopinions/

 

Also... this is a long form text article. Text is running in a narrow strip down center of screen. I'm sure it's because I had it set for margins for laptop reading, but shouldn't it scale a little better? 

 

IMG_5241 2.PNG

Share this post


Link to post
Share on other sites
nfp1900

I have found some other issues on the mobile. 

meganav isn't now full screen on either the ipad or iOS on one page. I have checked and the shortcode from the contact form in the text box below is causing the issue. 

I have also seen that the shortcode causes the contact form to spill out of the 6 column text box which is in a 12 column container. What do you recommend for shortcodes? The embed box?

 

IMG_6430.thumb.PNG.2ff84fdbdfd276217d995

 

 

Share this post


Link to post
Share on other sites
nfp1900

To add to the above, I have also put the contact form shortcode into a sidebar in the Wordpress loop and it still causes the menu to have a gap to the right (as in the above phone grab).  So it looks like any shortcode is affecting the meganav

To add to the above, I have also put the contact form shortcode into a sidebar in the Wordpress loop and it still causes the menu to have a gap to the right (as in the above phone grab).  So it looks like any shortcode is affecting the meganav

Share this post


Link to post
Share on other sites
micstepl
1 hour ago, nfp1900 said:

To add to the above, I have also put the contact form shortcode into a sidebar in the Wordpress loop and it still causes the menu to have a gap to the right (as in the above phone grab).  So it looks like any shortcode is affecting the meganav

To add to the above, I have also put the contact form shortcode into a sidebar in the Wordpress loop and it still causes the menu to have a gap to the right (as in the above phone grab).  So it looks like any shortcode is affecting the meganav

I figured out the same.

Share this post


Link to post
Share on other sites
micstepl

MEGA NAV issues

logo related > click issues

  • once the logo is too large (getting too close to the menu item)
  • you can´t press the menu
  • suggested solutions
    • > menu has to go with priorits
    • > layer menu button > to the  very front

closing the menu > not possible

  • closing of the menu is generally not possible (except selecting a menu item)
  • suggested solutions
    • > add a "close X" inside the menu (right top)
    • > close menu - on "swipe right"
    • > close menu - on "tappig on content"

 

Share this post


Link to post
Share on other sites
micstepl

general alignment issues

logo & footer .... allover the place

  • both reach over/across the border
    • that is defined in settings
    • even if section padding/margin in RESET

content width .... incorrect

  • if content width is set in > PL setting ... is correct in desktop browsers 
    • eg. 80% > is really approx. 80% of screen
  • in MOBILE
    • content width > is incorrect
    • eg. 80% > are far off 80%
    • settings seem to be ignored

Padding/Margin

  • there is EXTRA padding added to any section 
    • on mobile only
    • even if section padding/margin in RESET

 

 

Share this post


Link to post
Share on other sites
Simon

perhaps content width should be 100% on mobile anyway.. unless its a large ipad or something...

Share this post


Link to post
Share on other sites
mnagillum

Andrew and Gavin,

The Tangram Carousel issue I mentioned above has not been resolved on my iPhone, in both Safari and Chrome. The carousel is still showing three frames across, not two. It looks exactly as it did in the earlier image, so I am not attaching a new image.

Thanks!

Share this post


Link to post
Share on other sites
Andrew

@JudithKlinger those pull quotes are from Shortcodes Ultimate i think, we can't do much about their CSS.

@mnagillum which version are you using and are you sure that the old JS isn't cached? 

Share this post


Link to post
Share on other sites
nfp1900

I still have an issue with shortcodes from contact form 7 causing the meganav to render incorrectly - doesn't matter whether it's in a sidebar widget or other section.

logo is also still stretched after the update. 

Share this post


Link to post
Share on other sites
micstepl
On 11. Februar 2016 at 11:47 PM, Simon said:

perhaps content width should be 100% on mobile anyway.. unless its a large ipad or something...

I´d rather recommend to leave this decision up to the user 

  • set value of
    • px / EM / % 
  • and defaults
    • across all sections
    • padding/margin = 0

 

what I mean with "leave the desision up to the user:

  • add in PL-settings fields for the users (maybe sort of a table with number entry).... 
  • to enter all values by themselves (sitewide)
  • for: fixed + read
  • All separately for: mobile+large mobile+ desktop

AND ..... align all sections to use these on their default padding/margin without exception (see Magazine :( )

 

see example Implementation.

Ohne Titel.001.jpeg

Share this post


Link to post
Share on other sites
micstepl

MEGA NAV issue @  logo related > click issue

I figured out a possible issue, when looking at PL code 

  • current situation
    • "meganav-branding" container is clickable
    • this causes above decribed issues 
  • solution???
    • in my opinion only "meganav-logo site-logo" should be clickable
    • this would make menu  make more procise for larger + smaller logos 

Share this post


Link to post
Share on other sites
chrisayers
14 hours ago, micstepl said:

I´d rather recommend to leave this decision up to the user 

  • set value of
    • px / EM / % 
  • and defaults
    • across all sections
    • padding/margin = 0

I agree, I personally hate 100% on mobile. 95% yes. I really personally do not like my text on edges and find myself having to work just as hard to add it all back in as the rest do ripping it all out. I have had 5 PL5 sites go live, Only one of those asked for padding at 100 the others all asked my why they could not read the edges. If you are going to set them at least to it the same globally. Some sections we have like magazine are set to a 40% content width for single post. All our other sections use a 8 use an 8/4 default then my clients get to magazine and it is 9/3 and sidebar is too small for my ads that I sized on other pages. If you are gonna set sizes, please pick one and stick with it so that I can then do what I need globally.

Share this post


Link to post
Share on other sites
micstepl
1 minute ago, chrisayers said:

I agree, I personally hate 100% on mobile. 95% yes. I really personally do not like my text on edges and find myself having to work just as hard to add it all back in as the rest do ripping it all out.

same with me :)

 

Share this post


Link to post
Share on other sites
micstepl
16 hours ago, micstepl said:

I´d rather recommend to leave this decision up to the user 

  • set value of
    • px / EM / % 
  • and defaults
    • across all sections
    • padding/margin = 0

@chrisayers ... Please see the addons that I made to my original statement. 

 

Share this post


Link to post
Share on other sites
janpeeters

I would love an option to have submenus in mobile menu opened instead of that I have to click the triangle. It's a bit cumbersome to have to do that on a mobile screen. Give it a little indent with a hyphen before so it's clear it's opened.

Share this post


Link to post
Share on other sites
janpeeters
On 11 February 2016 at 8:25 PM, nfp1900 said:

I have found some other issues on the mobile. 

meganav isn't now full screen on either the ipad or iOS on one page. I have checked and the shortcode from the contact form in the text box below is causing the issue. 

I have also seen that the shortcode causes the contact form to spill out of the 6 column text box which is in a 12 column container. What do you recommend for shortcodes? The embed box?

 

IMG_6430.thumb.PNG.2ff84fdbdfd276217d995

 

 

The following custom CSS might help your problem for now. 

div.wpcf7 .wpcf7-form-control { max-width: 100%; box-sizing:border-box; }

 

Share this post


Link to post
Share on other sites
micstepl

Feature Request - Internal Section "breaks"
Order of "each Sections Internal Elements (Grid)" on mobile
I´d like to refer and ADD to @chrisayers post form yesterday.

THE REQUEST:

  • that ALL SECTIONS
    • with an internal "grid structure" (their internal elements)
    • also if it´s only a "call to action" (left text - right button)
    • also relevant for sidebars !!! (ich goes below/above text, etc.)
  • have a field/way
    • to define their break/sort ORDER in mobile Layout (menaning you can choose what goes on Top - what Last, etc.
    • that my be different than that from desktop (beeing from left to right) 

 

heromobile.thumb.png.d7a18f736a03ead0fd2e54bf66b53aa6.png

Share this post


Link to post
Share on other sites
nfp1900
18 hours ago, janpeeters said:

The following custom CSS might help your problem for now. 

div.wpcf7 .wpcf7-form-control { max-width: 100%; box-sizing:border-box; }

 

Thanks that corrected the contact form but the logo is still stretched into the menu. Hopefully that will be fixed in the meganav update

Share this post


Link to post
Share on other sites

×