Jump to content

Archived

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

micstepl

inconsistancy in responsive grid

Recommended Posts

micstepl

OK in large browsers
Issue occouring in Mobile  

 

  • OK Position Selection: "right", or "left" alignment  of   Image & text
  • Problem Text-Alignment:  left, center, right 

 

The bug occours on mobile views

  • correct:  the image breaks ... to be above, or below 
  • incorrect: the Text alignment is not executed
  • inconsistancy in rsponsive grid design

 

Correct handling for Mobile would be:

  • Position: Text right + Image left
    • Text is on TOP
    • Image is BELOW
  • Position: Image right + Text left
    • Image is on TOP
    • Text is BELOW
  • In both above cases, the TEXT ALIGN makes following
    • LEFT:
      • Text > Left
      • Image > edge - to - edge
    • CENTER:
      • Text > center
      • Image > edge - to - edge
    • RIGHT:
      • Text > right
      • Image > edge - to - edge

 

 

@Andrew Recommendation & Feedback: Currently I do with my eyes recognice decreasing aesthetic attention in many PL5 sections (form a visual, UI consistancy and options perspektive) , compared to DMS. I would pay attention, in order to not slip into a "techy-trap" (see the example above).

 

Share this post


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

OK in large browsers
Issue occouring in Mobile  

 

  • OK Position Selection: "right", or "left" alignment  of   Image & text
  • Problem Text-Alignment:  left, center, right 

 

The bug occours on mobile views

  • correct:  the image breaks ... to be above, or below 
  • incorrect: the Text alignment is not executed
  • inconsistancy in rsponsive grid design

 

Correct handling for Mobile would be:

  • Position: Text right + Image left
    • Text is on TOP
    • Image is BELOW
  • Position: Image right + Text left
    • Image is on TOP
    • Text is BELOW
  • In both above cases, the TEXT ALIGN makes following
    • LEFT:
      • Text > Left
      • Image > edge - to - edge
    • CENTER:
      • Text > center
      • Image > edge - to - edge
    • RIGHT:
      • Text > right
      • Image > edge - to - edge

 

 

@Andrew Recommendation & Feedback: Currently I do with my eyes recognice decreasing aesthetic attention in many PL5 sections (form a visual, UI consistancy and options perspektive) , compared to DMS. I would pay attention, in order to not slip into a "techy-trap" (see the example above).

 

 

screenshot.png

Share this post


Link to post
Share on other sites
hibbsy78

@micstepl There is a current bug with the Hero section on mobile only using 50%.

Try adding the following css to adjust it:

.hero-span {
    max-width: 100%;
    flex-basis: 100%;
}

 

Share this post


Link to post
Share on other sites
micstepl
2 minutes ago, hibbsy78 said:

.hero-span { max-width: 100%; flex-basis: 100%; }

Perfect! - works fine - Thanks!

Good to know, that you are aware of this bug :)

 

Share this post


Link to post
Share on other sites

  • Similar Content

    • hibbsy78
      By hibbsy78+
      I just spotted the standalone Heroes section as opposed to the Elements>Hero section and I much prefer this layout with the larger text directly under the heading but again on mobile (iPhone) it screws the layout similar to the contact form 7 page (http://www.johnhibbs.me/contact/).
      http://www.johnhibbs.me/daddy/
       

×