3rd flex column styling issue on tablet sizes - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
November 10, 2021 at 11:52 am #1328461
rob2701
Participant
Hi,

I noticed a small styling issue with 3 flex columns next to each other. On tablet size (768-989px) the 3rd column has a top margin that was not there before. On desktop and phone sizes all is OK.

Can you have a look at this and tell me how to fix it? Thanks!

Links to screenprints and login link in private box.

Rob

P.S. added related issue.
Related on INFO main page, where 5 columns become 2 for tablet, all strange now.
To fix it (somewhat) I had to add the following. So what changed from before? I can’t figure it out…:
Note: I did not add below yet, so you can see the effect for yourself first.
```
/* Adjust elements on INFO grid row page misaligning on tablet (becomes 2col) */
@media only screen and (max-width: 989px) and (min-width: 768px) {
    #top.page-id-620 #av-layout-grid-1 div .av_one_fourth {
        width: 47%; /* used to work with standard 48% ! */
        margin-top: 20px;
        margin-left: 20px;
    }
}
```
- This topic was modified 3 years, 1 month ago by rob2701.
November 10, 2021 at 3:40 pm #1328524
Ismael
Moderator
Hey Rob,

Thank you for the inquiry.

The top margin is due to this css code..
```
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;
}
```
.. which is inside this css media query.
```
@media only screen and (max-width: 989px) and (min-width: 768px) {

}
```
The code is probably located inside the Quick CSS field.

Best regards,
Ismael
November 10, 2021 at 4:08 pm #1328536
rob2701
Participant
Hi Ismael,

Thanks for the answer, but that only applies to child 5,6,9 and 10 on the INFO page. In fact when you comment it out, the same issue is there when the 5 columns change to 2 on that media size. :-)
```
@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; */
  }
}
```
Also it seems your answer and my added issue comment above happened at the same time, so you probably did not get a chance to read that. The columns also misbehave on the INFO page (5 columns turning to 2).
On the home page the issue is with 3 flex columns, so they don’t even have a child 5,6,9 and 10.

Rob

P.S.
this is just a staging server, so feel free to try things out.
Also, the homepage is id 608, the info page is id 620…
- This reply was modified 3 years, 1 month ago by rob2701.
November 10, 2021 at 4:47 pm #1328545
rob2701
Participant
Something changed in the last few theme updates, because the Quick CSS worked perfectly before :-)
I didn’t notice myself, client alerted me.

The real question is: if I specifically target page id-620 (info page), how would that affect page id-608 (Homepage)? Because it does…
Remark added later:
my mistake, the CSS did not target the div:nth-child(5) for page id-620, that was just for the width. Sorry, I misread my own CSS :-)

What remains is that suddenly I need the changed CSS added to make the change to 2 columns work well on the info page (https://kriesi.at/support/topic/3rd-flex-column-styling-issue-on-tablet-sizes/#post-1328461).
So what was changed in the parent theme to cause that?

Thanks for looking into this (again),

Rob
- This reply was modified 3 years, 1 month ago by rob2701. Reason: mistake in link to post
November 10, 2021 at 9:03 pm #1328568

rob2701
Participant

Hi Ismael,

Never mind, it’s a bit counterproductive to look for why what was changed when :-)
To fix the info page, I will just add the css I mentioned in the initial request. And to fix the 3 col flex on the homepage I will comment out the top-margin 30px which I thought targeted only id-620 but didn’t. Thanks for pointing that out and thanks once again for your help.

Resolved,

Have a good evening,
Rob

November 11, 2021 at 6:12 am #1328597

Rikard
Keymaster

Hi Rob,

Great, I’m glad that Ismael could help you out, and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘3rd flex column styling issue on tablet sizes’ is closed to new replies.