Flexbox, text positioned over image problem with mobile devices

Design help General
1

Hey Guys

I just did my first trys with flexbox and i love it. I tried to build a navigation with it. So i do have 3 squares in a row. They contain an image and a text overlayed over the image. To do that, I set the text as absolut and set the flexbox settings justify / align center.

On desktop it looks good. But on mobile devices such as iPad or iPhone, the text isn’t centered but in the upper left of the flex box.

Can some one help me? I’m using a iPad pro with iOS 10… so i think it should be flexbox compatible. And it occurs on safari and chrome browser.

I’m sorry but I do no know how tho share a shared link for a specific page… it’s the site “zug feiert schnäuze” in the folder “2016”

Many thanks!!

2048×1536 331 KB

Here is my public share link: LINK
(how to access public share link)

2

Oh well there are a couple of things, that you ll need to set right.

  1. Set 2016_landing_nav_linkdiv to RELATIVE and 2016_landing_nav_bgimage to ABSOLUTE.

  2. Set 2016_landing_nav_h3 to Position: RELATIVE, set Margin left and Right to 0
    You dont need these values since you can position your elements with the flexbox-attribute.

  3. REMOVE all inherited properties from tablet to mobile from these 3 elements

Then you can define a new layout for mobile for these teaser.

Regards,
Daniel

p.s. Wenn du noch Fragen hast, schick mir ne PM

3

Great worked perfect! many thx

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.