iPad and iPad Pro landscape

on iPad pro on landscape yesterday the homepage used to look like it does on normal ipad when landscape but it doesnt.

so ipad pro in landscape needs to look like normal ipad in landscape:

  • Luís
    • Support

    Hey allanlove ,

    Hope you’re doing well since our live chat!

    In order to achieve what you have asked, we will need to modify some of the custom CSS you have added, this to prevent conflicts between the media queries.

    1) Change this code from:

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #first-row .et-last-child {
    display:none;
    }
    .et_pb_row_3 .et_pb_column.et_pb_column_2_5.et_pb_column_6.et_pb_css_mix_blend_mode_passthrough.et_pb_row_sticky{
    display:none !Important;
    }
    }

    to

    @media only screen and (min-device-width: 1030px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #first-row .et-last-child {
    display:none;
    }
    .et_pb_row_3 .et_pb_column.et_pb_column_2_5.et_pb_column_6.et_pb_css_mix_blend_mode_passthrough.et_pb_row_sticky{
    display:none !Important;
    }
    }

    2) Change this code from:

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
    #first-row .et-last-child {
    display:none;
    }
    
    .et_pb_row_3 .et_pb_column.et_pb_column_2_5.et_pb_column_6.et_pb_css_mix_blend_mode_passthrough.et_pb_row_sticky{
    display:none !Important;
    }
    }

    to

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1023px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
    #first-row .et-last-child {
    display:none;
    }
    
    .et_pb_row_3 .et_pb_column.et_pb_column_2_5.et_pb_column_6.et_pb_css_mix_blend_mode_passthrough.et_pb_row_sticky{
    display:none !Important;
    }
    }

    3) Finally, add this code to correct the iPad landscape:

    @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1366px) and (min-device-width: 768px) and (orientation: landscape){
    
    .mytablet_off {
    display: block!important;
    }
    .et_pb_column.et_pb_column_1_2, .et_pb_column {
    width: 47.25% !important;
    }
    div#first-row .et-last-child {
        display: block !important;
    }
    }
    

    Please let us know if it did the job!

    Cheers, Luís

  • allanlove
    • The Incredible Code Injector

    Hi, Thanks for your response,

    It hasn’t worked at all and has undone the changes on normal ipad look landscape.

    Please can you log into the back end of the site and make the changes and test for yourself? Letting me know what is needed to fix?

    I have also noticed in the support description i forgot to mention ipad pro portrait also needs to look like normal ipad landscape. Which it did the other day. I don’t know what changes occurred which changed it.

    Please please can you help me

  • Nithin
    • Support Wizard

    Hi allanlove ,

    It hasn’t worked at all and has undone the changes on normal ipad look landscape.

    Please can you log into the back end of the site and make the changes and test for yourself? Letting me know what is needed to fix?

    Maybe we are missing something. I checked with Luis, and even he could confirm the landscape in iPad Pro mode looks the same as the iPad landscape.

    I’m afraid, could you please point out what’s being missed. If above is the case it looks fine in our side when tested.

    i forgot to mention ipad pro portrait also needs to look like normal ipad landscape. Which it did the other day. I don’t know what changes occurred which changed it.

    This also seems to be how the website loads. iPad Landscape is how the iPad Pro Portrait looks:

    Are you checking in real physical iPad devices? If yes, could you please clear the browser cache, and history and check again to see how it loads in our side.

    If that isn’t the case, please do share screenshots regarding what you are noticing so that we could guide you better.

    Regards,
    Nithin

  • allanlove
    • The Incredible Code Injector

    Hi

    I think the main point or what i need it to look like is being missed here!

    I mentioned above I need iPad Pro portrait AND Landscape to look like Landscape NORMAL IPAD NOT like desktop.

    Hopefully that makes things clearer.

    But normal ipad look is not correct at the moment as the css supplied above ruined it. It looked like the screenshot attached before. Section was across whole page and didn’t have images in first two sections.

    Please fix this

    Thank you :slight_smile:

  • Nithin
    • Support Wizard

    Hi allanlove ,

    Thanks, I have made the changes, and have added the following CSS in your website:

    @media only screen 
      and (min-device-width: 834px) 
      and (max-device-width: 1112px)
      and (-webkit-min-device-pixel-ratio: 2) {
    
    	.et_pb_gutters3 .et_pb_column_2_5, .et_pb_gutters3.et_pb_row .et_pb_column_2_5, #first-row > div.et_pb_column.et_pb_column_1_2.et_pb_column_1.et_pb_css_mix_blend_mode_passthrough.et-last-child {
    		display: none;
    	}
    
    	.et_pb_gutters3 .et_pb_column_3_5, .et_pb_gutters3.et_pb_row .et_pb_column_3_5, .et_pb_gutters3 .et_pb_column_1_2 {
    		width: 100%;
    	}
    
    }
    
    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px)
      and (-webkit-min-device-pixel-ratio: 2) {
    
    	.et_pb_gutters3 .et_pb_column_2_5, .et_pb_gutters3.et_pb_row .et_pb_column_2_5, #first-row > div.et_pb_column.et_pb_column_1_2.et_pb_column_1.et_pb_css_mix_blend_mode_passthrough.et-last-child {
    		display: none;
    	}
    
    	.et_pb_gutters3 .et_pb_column_3_5, .et_pb_gutters3.et_pb_row .et_pb_column_3_5, .et_pb_gutters3 .et_pb_column_1_2 {
    		width: 100%;
    	}
    
    }

    Please check, and see how it goes. IPad Pro should look like iPad in landscape, and portrait mode. Please advise if I missed out anything too.

    Regards,
    Nithin

  • allanlove
    • The Incredible Code Injector

    Hiya,

    That is fab, thanks so much!!

    I also need the footer which displays on normal iPad to show on iPad pro (both portrait and landscape)

    So both tablets need to look like this

    Please can you help with this? I believe I have given both sections classes

    Kind regards

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.