Need Help Making page look the same on iPad and iPad pro size screens

https://brg.allanlove.net/members/

The page above on iPad Pro both portrait and landscape looks great. I need help with making normal iPad look on both portrait and landscape the same as iPad Pro portrait look. Hopefully that makes sense?

I believe there may be some css in pace but it obviously isn’t working correct.

  • Kris
    • Support

    Hi allanlove

    Hope you are doing good today.

    To manage this and test my code I need to add for each section separate ID on this page:

    #members_row_01
    #members_row_02
    #members_row_03
    #members_row_04
    #members_row_05
    #members_row_06
    #members_row_07

    Can you add this css in Appearance -> Customize -> Additional CSS section and review then on iPad:

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    #members_row_01 .et_pb_column {max-width:25%; padding:0 1%;}
    #members_row_02 .et_pb_column {max-width:18%; margin:0 0 0 1.6% !important;}
    #members_row_03 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_04 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important; }
    #members_row_05 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_06 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_07 .et_pb_column {max-width:25%; padding:0 1%;}
    }
    
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    #members_row_01 .et_pb_column {max-width:25%; padding:0 1%;}
    #members_row_01 .et_pb_column.et_pb_column_empty {display:inline-block; margin:0;}
    #members_row_02 .et_pb_column {max-width:18%; margin:0 0 0 1.6% !important;}
    #members_row_03 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_04 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important; }
    #members_row_05 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_06 .et_pb_column {max-width:23%; margin:0 0 0 1.6% !important;}
    #members_row_07 .et_pb_column {max-width:25%; padding:0 1%;}
    #members_row_07 .et_pb_column.et_pb_column_empty {display:inline-block; margin:0;}
    }

    Hope this will help :slight_smile:

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.