Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 14, 2020 at 7:03 am #1203456
    apremierdj

    I am creating a mobile web app and cannot get the breaking points for columns to work on mobile phone.

    Can you please help with a quick css code to adjust the breaking points in each section.

    Main screen buttons: I need 3 rows of 3 column
    Social Media Icon: I need 1 row of 5.

    Here is an image of what i need it to look like: https://www.dropbox.com/s/0bryoq4ze7r8i69/2020-04-05%2022-42-53%20Screenshot.jpg?dl=0

    I only want this to affect this particular page: https://www.abelldjcompany.com/app-home/

    Thank you in advance

    April 14, 2020 at 4:17 pm #1203651
    Victoria

    Hey Chris,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:767px){
    .responsive #top #wrap_all .flex_column.av_one_third {
        width: 31%;
        clear: none;
        float: left;
        margin-left: 2%;
    }
    .responsive #top #wrap_all .flex_column.av_one_fifth  {
        width: 18%;
        clear: none;
        float: left;
        margin-left: 2%;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 14, 2020 at 5:48 pm #1203688
    apremierdj

    This worked great.

    This code will only affect this one page correct? I only want this to affect this particular page: https://www.abelldjcompany.com/app-home/

    Or do I need to add something else to the code?

    April 14, 2020 at 9:05 pm #1203764
    Jordan Shannon

    Hi,

    To target just that page adjust the css to this:

    @media only screen and (max-width:767px){
    .responsive #top.page-id-64902 #wrap_all .flex_column.av_one_third {
        width: 31%;
        clear: none;
        float: left;
        margin-left: 2%;
    }
    .responsive #top.page-id-64902 #wrap_all .flex_column.av_one_fifth  {
        width: 18%;
        clear: none;
        float: left;
        margin-left: 2%;
    }
}

    Best regards,
    Jordan Shannon

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