Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1406515

    Dear Support Team

    I have a problem regarding the tablet optimization of the following grid row element: http://neu2.dc-gmbh.com/#design-engineering and also the grid row sections following it.

    Although I have entered the same information everywhere in the settings, the grid rows appear in strange views on the tablet (portrait and landscape):

    The setting for mobile and tablet portrait is supposed to be that for all the gris rows, the left column with the fixed background image (screen) should be hidden. According to this I have at
    > Grid Row > Advanced > set the mobile toggle point to tablet (>989px).
    > and in the cell itself (with the image) at > Advanced > Responsive specified “hide on mobile devices”.
    >> On mobile it appears correctly
    >> Only on tablet portrait I get different and not understandable views:
    1st Grid Row section: link: http://neu2.dc-gmbh.com/#design-engineering >> View on tablet portrait: http://neu2.dc-gmbh.com/support/view1-tablet.PNG >> Why is there such a huge empty space above?

    2nd section Grid-Row: Link: http://neu2.dc-gmbh.com/#visualisierung
    View on tablet portrait: http://neu2.dc-gmbh.com/support/view2-tablet.PNG >> Why is here again 2spalitg (despite exactly identical settings? I have already cleared browser cache several times!)

    3rd section Grid-Row: Link: http://neu2.dc-gmbh.com/home#modelling
    View on tablet portrait: http://neu2.dc-gmbh.com/support/view3-tablet.PNG >> Why is here the image displayed???

    ——————

    Tablet Landscape View:

    On the tablet landscape I still want a 2 column display, so on the left the image, on the right the column with the text.
    At the moment I have here also again on the one hand different representations and on the other hand the picture is not indicated (although it has the alignment left/center).

    1. section Grid-Row: Link: http://neu2.dc-gmbh.com/#design-engineering >> View on tablet landscape: http://neu2.dc-gmbh.com/support/view2-tablet-quer.jpeg >> Why does the image not appear?

    2nd section Grid-Row: Link: http://neu2.dc-gmbh.com/home#modelling
    View on tablet landscape: http://neu2.dc-gmbh.com/support/view1-tablet-quer.jpeg >> Why does the image appear and not on the other sections? Why is it “hanging” between the sections?

    Could you please help me?
    Thank you for your editing and best regards, Diana

    #1406660

    Hey Diana,
    Thank you for the link to your site and the screenshots, I believe there has been a misunderstanding about the grid row responsive display settings, the Grid Row > Advanced > set the mobile toggle point to tablet (>989px) doesn’t influence the setting Cell > Advanced > Responsive specified “hide on mobile devices” this is for <767px only.
    From your screenshots it looks like you are using an iPad and I assume the screen resolution is 1024px x 1366px so I disabled the “hide on mobile devices” for these 5 sections and added this css to your Quick CSS:

    @media only screen and (max-width: 989px) { 
    .responsive #top #wrap_all #design-engineering.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #visualisierung.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #modelling.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #corporate-design.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #personalagentur.av-break-at-tablet .flex_cell.av_two_fifth {
    	display: none;
    }
    }
    @media only screen and (min-width: 990px) and (max-width: 1440px) { 
    .responsive #top #wrap_all #design-engineering.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #visualisierung.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #modelling.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #corporate-design.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #personalagentur.av-break-at-tablet .flex_cell.av_two_fifth {
    	background-position-x: -13vw
    }
    }

    This gives you a single column and hide the image for mobile and smaller tablet in portrait mode and two columns above 990px for larger tablets and desktop.
    In my test background-position-x: -13vw seemed good for moving the image over to the left, but feel free to adjust to suit.

    Best regards,
    Mike

    #1406698

    Hello Mike,
    thank you very much for your answer.
    On the tablet portrait it works perfectly with your script now!

    Only on the tablet landscape (yes I use an i-pad) I unfortunately still have the problem that the image is displayed only once and that between the 2nd and 3rd grid row. In all other grid row sections the field remains empty: see screenshots:

    – Grid Row 1: Tablet landscape: http://neu2.dc-gmbh.com/support/2/1.jpeg (Link to it: http://neu2.dc-gmbh.com/#design-engineering)
    – Grid Row 2: Tablet landscape: http://neu2.dc-gmbh.com/support/2/2.jpeg (Link to it: http://neu2.dc-gmbh.com/#visualisierung)
    – >>> Grid Row 3: Tablet landscape: http://neu2.dc-gmbh.com/support/2/3.jpeg (Link to it: http://neu2.dc-gmbh.com/#modelling) !!!! here the image appears once ! but with half the view of grid Row 2 and the other half of grid row 3!
    – Grid Row 4: Tablet landscape: http://neu2.dc-gmbh.com/support/2/4.jpeg (Link to it: http://neu2.dc-gmbh.com/#corporate-design)
    – Grid Row 5: Tablet landscape: http://neu2.dc-gmbh.com/support/2/5.jpeg (Link to it: http://neu2.dc-gmbh.com/#personalagentur)

    I have already cleared the cache of my i-pad several times, so that can’t be the problem.
    Can you help me here please?
    Many thanks and greetings, Diana

    Translated with http://www.DeepL.com/Translator (free version)

    #1406727

    Hi,
    Please use this screen resolution tool and tell us what your iPad screen size is for landscape in the images above as there are a few different iPad sizes. Also tell us what version and iOS your iPad and Safari is. There are some older versions that have quirks with parallax.

    Best regards,
    Mike

    #1406840

    Hello Mike,

    The screen resolution on the i-pad is 810 x 1080 px according to the link you sent me. The browser I use on the i-pad is Mozilla Firefox version 112.2. The i-padOS version is 16.1.

    Does this help to find the problem?
    Many greetings, Diana

    #1407101

    Hi,
    Thank you for your patience and your screenshots, I have tested this on BrowserStack with a v16 iPad and saw the missing image in Safari but there is not a way I can inspect the page with the virtual iPad. I also tested on my Mac using the Responsive Design Mode to emulate an iPad but the images show correctly, so I can determine why it’s not working on your iPad.
    I recently saw in another thread about iPads that the browsers were not showing some elements correctly in older versions, I believe this is what is occuring in your iPad. Try checking if there is an update available for your iPad. Recently another user told me that older iPads are version locked and do not updat, I don’t have an iPad, but my Mac is quite old and updates quite often, so I thought all iOS devices did. If you can’t update I wil ask the rest of the team if they have an iPad that will reproduce this, otherwise my recommendation is to hide the image cell on iPad like you are for iPhone and only show it on desktop.
    If you want to try this you can use this css instead of the css above:

    @media only screen and (max-width: 1439px) { 
    .responsive #top #wrap_all #design-engineering.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #visualisierung.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #modelling.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #corporate-design.av-break-at-tablet .flex_cell.av_two_fifth,
    .responsive #top #wrap_all #personalagentur.av-break-at-tablet .flex_cell.av_two_fifth {
    	display: none;
    }
    }

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.