Column breakpoint

  • Altaico

    (@altaico)


    1 year, 2 months ago

    Hi,

    thank you for this awesome theme.

    I have a problem with the column breakpoint, in tablet is not really responsive.

    Actually the breakpoint is set to 782px, it’s possible to change it and set at 1200px.

    I have tried this code that I found in the forum but doesn’t works.

    @media(max-width: 1200px) {
    div.wp-block-columns.break-1200 {
    flex-wrap: wrap !important;
    }
    div.wp-block-columns.break-1200 > div {
    flex-basis: 40% !important;
    }
    }

    ¿Can you help me?

    Thank you.

    Best Regards.

    Altaico

    • This topic was modified 1 year, 2 months ago by Altaico.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • ying

    (@yingscarlett)

    1 year, 2 months ago

    Hi there,

    We don’t have control over WP’s core blocks, including the columns block.

    Your CSS should work, but I’m not seeing it on your site.

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    Now is added but doesn’t work as I want, because when I have 4 columns in a 782px resolution, I would like to increase the breakpoint at least at 1024px.

    Thank you.

    Best regards

    • This reply was modified 1 year, 2 months ago by Altaico.
    ying

    (@yingscarlett)

    1 year, 2 months ago

    I don’t quite understand your goal by looking at your CSS, can you describe what you want exactly? I can help with CSS although the block is not from us.

    Currently the columns block has 2 columns including 1 empty column, let me know the layout you want.

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    Hi,

    I think is more easy to understand it with an image.

    The problem is 4 columns tablet view from 782px to more or less 1024px wide.

    https://ibb.co/B5LGzdzT

    For this reason I would like to increase the columns breakpoint at 1024px.

    Thank you for your support.

    bye

    • This reply was modified 1 year, 2 months ago by Altaico.
    ying

    (@yingscarlett)

    1 year, 2 months ago

    I do not see this section on your homepage, can you link me to the page in question?

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    This happen in every page with four columns.

    This is the page of the screenshot: https://www.altaico.es/como-funcionan-las-barreras-automaticas-para-parking/

    Thank you.

    Best regards.

    ying

    (@yingscarlett)

    1 year, 2 months ago

    It should work with this CSS:

    @media(max-width:1024px) {
        .break-1200.wp-block-columns {
            flex-wrap: wrap !important;
        }
    }

    https://app.screencast.com/zi54QCGCkQ36J

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    doesn’t work.

    I left the code in the additional CSS.

    Thank you.

    Best regards

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    I think this is the correct solution: 

    /* block columns breakpoint */
    @media (min-width:782px){
      .wp-block-columns{
        flex-wrap:wrap !important;
      }
    }
    @media (max-width:1024px){
      .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        flex-basis:100% !important;
      }
    }
    @media (min-width:782px){
      .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        flex-basis:0;
        flex-grow:1;
      }
    }
    • This reply was modified 1 year, 2 months ago by Altaico.
    ying

    (@yingscarlett)

    1 year, 2 months ago

    Glad you worked it out 🙂

    Thread Starter Altaico

    (@altaico)

    1 year, 2 months ago

    thank for the support and for this awesome theme.

    best regards.

    ying

    (@yingscarlett)

    1 year, 2 months ago

    You are welcome   🙂

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Column breakpoint’ is closed to new replies.