CSS help needed for mobile

I have This CSS

@media only screen and ( min-width: 981px ) and ( max-width: 1024px ) {
.mytablet_off { display: none!important;}
.mytablet_on { display: block!important;}
.et_pb_column.et_pb_column_1_2, .et_pb_column {
width: 100%!important;
}
.et_pb_column.et_pb_column_1_4 { width: 50%!important; margin-right: 0!important;}
.et_pb_row.et_pb_equal_columns {
display: block;
}
}

Now all you need to do is define the row/section/module which you don’t want to show in iPad landscape with CSS Class: mytablet_off

And define the row/section/module which you want to show in iPad portrait, you can use this CSS Class: mytablet_on

on the homepage first section, so the look on iPad portrait is the same for landscape but on the landscape it disappears

Can you help me to make it work on iPad portrait and landscape?

Thank you in advance.

  • Predrag Dubajic
    • Support

    Hi allanlove ,

    In your page CSS I can see this code loaded that is hiding the part with the house background:

    @media only screen and (max-width: 980px) and (min-width: 768px) {
    	.et_pb_section_0. {
    	    display: none!important;
    	}
    }

    Overwriting this should be possible with this CSS code:

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) { 
    	.et_pb_section_0.mytablet_off {
    	    display: block!important;
    	}
    
    	.et_pb_section_1.mytablet_on {
    	    display: none!important;
    	}
    }

    However, since this page is built with Divi builder this might be affecting its original code for responsive design and I would suggest checking this with Divi support as well and see if they have a solution in Divi directly.

    Best regards,
    Predrag

  • allanlove
    • The Incredible Code Injector

    Hiya..

    I am not quite sure you have understood what I need to achieve.

    I basically need the section which shows on mobile and iPad portrait to show on iPad landscape and iPad pro both portrait and landscape.

    Does this make sense?

  • Predrag Dubajic
    • Support

    Hi allanlove ,

    I believe I understand it now, I pretty much got it the other way around previously, can you try with this CSS:

    /* iPad Pro - Portrait and Landscape */
    @media only screen 
      and (min-width: 1024px) 
      and (max-height: 1366px) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
    
    	.et_pb_section_0.mytablet_off {
    	    display: none!important;
    	}
    
    	.et_pb_section_1.mytablet_on {
    	    display: block!important;
    	}
    }

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.