content blocks don’t wrap on mobile

  • kimijye

    (@kimijye)


    1 year ago

    I changed my front page content layout from columns to stacks and rows – because the columns were too narrow and I couldn’t figure out any way to make them expand to the full width of the screen.

    But now, the stacked blocks do not stack vertocally when viewed on a mobile device. Viewing all of the blocks in each row requires horizontal scrolling. Is there a way to force the blocks to stack one on top of the other?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kartik Goswami

    (@kartikgoswami)

    Can you try checking this:

    Find the below class in your theme editor file:

    .wp-container-17

    And remove the below text:

    flex-wrap: nowrap;

    Save the changes and check if the blocks are stacked properly.

    ALTERNATE OPTION

    If you cannot find that text, or don’t see the change to your page, try this:

    Go to end of your theme file editor, and place the below text over there and click save.

    .page-id-27 .wp-container-27 .wp-container-17.wp-container-17 {
flex-wrap: wrap;
}
    Thread Starter kimijye

    (@kimijye)

    Kartik, thank you! Is there maybe a no-code solution?

    Where do I find the theme editor file?

    If I customize the css, will that change be wiped out in a future theme update?

    Thread Starter kimijye

    (@kimijye)

    After learning that I cannot easily access the FSE WP 2023 theme’s css, I’m thinking that this must be because the theme’s creators would rather the solutions come through FSE management rather than CSS.

    Maybe an option I chose for the layout of my site is invoking the no-wrap clause, so the solution ought to be identifying what that option is and changing it to a different option.

    Originally, I used columns for the content blocks I’m using, but I had an unfixable problem with margins or padding making those blocks so narrow, words were split into several lines and were not really legible looking like that. When I changed to horizontal rows of blocks, the narrowness disappeared and the content blocks (3 to a row) became full width. But now, when viewed on a handheld screen, the blocks stay in a row and don’t stack on top of each other. This makes it necessary for viewers to scroll horizontally to see all of the content blocks in a single row. Inconvenient and not what I want.

    Maybe the solution is changing back to the column model, but I’m not sure that will work and I have already recreated this page maybe 20 times, just randomly trying things out to try and make my content show up at all. I don’t want to keep applying that scattershot approach, and would really like to know why the blocks are not wrapping.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘content blocks don’t wrap on mobile’ is closed to new replies.