Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 11, 2016 at 3:45 am #562877
    piemoo

    Hi,
    i’ve this page: http://www.domingocommunication.com/prova-home-smartphone-e-tablet/
    i would like to change the grid row breakpoint ( the mobile behaviour) at 640px instead of 767px only on the grids of this page. Is there a custom class or a quick css i can apply?

    best regards,

    Nic

    January 12, 2016 at 3:22 am #563640
    Elliott

    Hey piemoo!

    Try adding this to your custom CSS.

    @media only screen and (min-width: 767px) and (max-width: 640px)
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin-bottom: 0px !important;
    width: 50% !important;
}

    Cheers!
    Elliott

    January 12, 2016 at 4:42 am #563660
    piemoo

    Hey Elliott,

    it seems it does not work..

    i would like this: http://it.tinypic.com/r/abtf9k/9 on landscape mode of large smartphone screens like the new iphone 6s or the iphone 6 plus..
    inserting your code the grid still appears like this:http://it.tinypic.com/r/dpwfvn/9

    note i would like to apply this mod only to my .page-id-2996

    best regards,

    Nic

    January 13, 2016 at 4:17 am #564310
    Elliott

    Hey!

    You’ll need to play around with the screen values in the CSS.

    (min-width: 767px) and (max-width: 640px)

    To target whatever screen sizes you want it to use 2 columns on.

    Cheers!
    Elliott

    January 13, 2016 at 4:49 am #564319
    piemoo

    Hey Elliott,
    screen resolution of the iphone 6 (the second screenshot i sent you) is 667px width..inserting your code it seems it doesn’t work.

    Best Regards,

    Nic

    January 13, 2016 at 5:25 am #564332
    piemoo

    Hey Elliott,
    i’ve solved myself.
    I write the solution in case someone has the same issue: i create a class #mobi and i put this in my custom css:

    @media only screen and (max-width: 640px) {#mobi .responsive {
    margin-bottom: 0px !important;
    width: 50% !important;
    float: left;
}}
@media only screen and (max-width: 640px) {#mobi .av-flex-cells {
    margin-bottom: 0px !important;
    width: 50% !important;
    float: left;
}}

@media only screen and (min-width: 640px) {#mobi .no_margin {
    margin-bottom: 0px !important;
    width: 50% !important;
    float: left;
}}

    Now it still work.

    Best Regards,

    Nic

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change the mobile breakpoint of some grids in one page’ is closed to new replies.