Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 15, 2023 at 7:25 pm #1398125
    MJM

    I just noticed that some of my columns are getting cut off on mobile. It is happening both in columns in color sections and grid rows. It was not doing this before, but I just noticed it and am not sure at what Enfold update it started occurring. I am currently using Enfold 5.4.1 on WordPress 6.1.1 and PHP 8.1. Is there any way to fix this? Thank you!

    Column in Color Section

    Column in Grid Row

    February 16, 2023 at 4:27 am #1398155
    Nikko

    Hi Kirstie,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:479px) {
  .responsive #top #wrap_all .flex_column {
    box-sizing: border-box;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    February 16, 2023 at 3:42 pm #1398228
    MJM

    Thank you! That worked for the columns in color sections, but not the ones in grid rows. Is there a way to fix that?

    February 17, 2023 at 12:57 pm #1398334
    Yigit

    Hi,

    I edited your Grid Row element and removed the padding from cell on small screen sizes: https://i.imgur.com/b2Jghdw.png

    Then, I edited your Column element and added 20px padding on mobile. If you have more pages with the same spacing issue, please adjust the padding sizes on mobile.

    Please review your website.

    Best regards,
    Yigit

    February 17, 2023 at 6:14 pm #1398381
    MJM

    That solves the problem, but I do have nearly 100 pages with this same layout. Is there anything I can do that doesn’t require manually customizing every grid row and every column? It was working before, so is there code I can add that makes the grid row function like it used to?

    February 17, 2023 at 6:26 pm #1398382
    MJM

    I was able to fix this problem on my own by changing the width of the flex cell to “auto” instead of “100%” Here is the code for anyone else having this issue:

    @media only screen and (max-width: 989px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
width: auto;
}
}
    • This reply was modified 1 year, 9 months ago by MJM.
    February 17, 2023 at 7:48 pm #1398391
    Mike

    Hi,
    Glad to hear that you have this sorted out, and thanks for sharing your solution, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Columns Getting Cut Off on Mobile’ is closed to new replies.