3 column Grid still displays on mobile

  • Resolved fatherb

    (@fatherb)


    8 years, 1 month ago

    I have a grid of 3 columns, which I want to degrade to one column on mobile. However on iphone 6 / iphone 6 plus which have screen sizes of 375 px and 414px wide, the 3 columns are still showing.

    How can I get the 3 columns to degrade to one column on all sizes of mobile phone? The tablet setting seems to kick in from around 320px which is much too small for most modern phones.

    Can I change a setting in Tailor somewhere for this?

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter fatherb

    (@fatherb)

    If anyone else has the problem with the mobile settings not being activated on larger screen phones (eg. iphone 6 and 7) then I used the following custom css to fix:

    @media only screen and (min-width: 321px) and (max-width: 599px) {
.tailor-ui .tailor-grid--tablet:not(.tailor-grid--masonry) {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: initial;
    flex-wrap: nowrap;}
.tailor-ui .tailor-grid__item {width: 100% !important;}
}

    It applies the mobile settings to screens below 600px and ensures grids reduce to a single column.

    Plugin Author Andrew Worsfold

    (@andrewworsfold)

    Thanks for that, @fatherb.

    The breakpoints used by Tailor are those adopted by the WordPress Customizer. I recognise that they don’t work for all screen sizes and in the future I will look to add a built in mechanism for changing the associated device widths from within Tailor.

    Cheers,
    Andrew.

    This is exactly what I needed tonight. Thank you, @fatherb!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘3 column Grid still displays on mobile’ is closed to new replies.