Grid row tablet strangeness

I fixed it like this for now:

/* Fix last section/element on 4col grid row page too small on tablet */
@media only screen and (max-width:1024px) and (min-width:768px) {
  #top.page-id-620 .av-layout-grid-container .av_one_fourth {
    width: 46%;
    margin: 2% 2%;
    display: block;
    float: left;
  }
  div.flex_column_div:nth-child(5),
  div.flex_column_div:nth-child(6),
  div.flex_column_div:nth-child(9) {
      margin-top: 2% !important;
  }
  div.flex_column_div:nth-child(2n) {
  margin-right: 2% !important;
  }
}

If there is a better way, please share.
You may want to incorporate some kind of fix for this in the next version of the theme.

Kind regards,
Rob

By the way, there is a similar strangeness in the 5col grid, so please look at that as well. :-)

Added comment 2020-06-24:
Just discovered that this suddenly also applies to subpages of that page, even though I target just the parent…Why? How to fix?

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Added comment about CSS suddenly also applying to subpages

Hi Victoria,

Sure, forgot to do that. It’s in the private field with a small explanation.

Kind regards,
Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Added explanation for subpages behaviour

Hi Victoria,

Yes of course it does, for me too, with the desktop size (4 elements per row).
The problem is with the tablet size (2 elements per row), like I wrote above. Jusr resize the browser window, you will see the issue.
Again, desktop and phone sizes are fine. Tablet size is the issue.
With the tablet size, you see the 9th element become much smaller than the others.
And when you apply the CSS (uncomment it at the bottom of Quick CSS), then you will see that size and the padding is all fixed, but then the subpages get a very narrow content space.

Kind regards,
Rob

Additional info:
This ONLY happens with 5 or 9 or 13 elements, strangely enough, so at the exact points of the desktop 4-per-row+1. When you clone the last element however, so to get 6, 10, 14 elements, everything is fine again, even with the tablet size. Then the only remaining issue is the top-margin between the original desktop-4-per-row even on the tablet-2-per-row. Which can be easily fixed with CSS.
But it seems the problem is there with 4n+1 on the tablet-size view (obviously when you use one_fourth elements like me).
When using one_fifth element the same logic applies, but then for 5n+1.

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Added still more testing info of when this issue happens on tablet size view

Hi Victoria,

Thanks, that works well. But I also had to add some CSS to that, because as I mentioned above, the groups of 4 otherwise have too much margin between them (retained from the desktop size view) compared to the groups of 2 in the tablet size view:

/* Adjust last section/element on INFO grid row page too small on tablet */
@media only screen and (max-width: 989px) and (min-width: 768px) {
    #top.page-id-620 #av-layout-grid-1 div .av_one_fourth {
        width: 48%;
    }
  div.flex_column_div:nth-child(5),
  div.flex_column_div:nth-child(6),
  div.flex_column_div:nth-child(9),
  div.flex_column_div:nth-child(10) {
     margin-top: 30px;
  }
}

Because I always like to understand why this happened in the first place like I described above (only the very last 4n+1 element becoming a smaller size), can you explain? I fail to see how that percentage setting could affect only that last element — I did not change that with CSS anywhere, except when trying to fix the issue on tablet view :-)
see #1225329 above, this happened without any of the tried fixes from my part:
Additional info:
This ONLY happens with 5 or 9 or 13 elements, strangely enough, so at the exact points of the desktop 4-per-row+1. When you clone the last element however, so to get 6, 10, 14 elements, everything is fine again, even with the tablet size. Then the only remaining issue is the top-margin between the original desktop-4-per-row even on the tablet-2-per-row. Which can be easily fixed with CSS.
But it seems the problem is there with 4n+1 on the tablet-size view (obviously when you use one_fourth elements like me).
When using one_fifth element the same logic applies, but then for 5n+1.

I notice that in my previous fix attempt I used the wrong media query for tablet, but that has nothing to do with the issue itself.
And also, is this something that will be included in a next update?

Thanks for your help,
Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Added questions

Hi Victoria,

I think I understand it now, somehow the last row in the tablet view adapted to a minimum width by not having it specifically set. Still strange that every time 1 more element added solved it too…

It’s understandable you did not see the issue before, someone would have to have tried (like I did) exactly 1 more element than the number of desktop view rows created by the chosen number of elements per row in the desktop view (whether 3, 4, 5 or 6). I mean what are the odds?
I just happened to stumble upon it by chance :-)

Thanks for your patience and help! Issue solved, you can close this one.
Rob

• This reply was modified 4 years, 6 months ago by rob2701.