Beta 2 - reponsive columns are not displaying correctly at smaller screens

Beta
#1

Hi, I think this may be the same issue as this ticket Beta 2 Bug: Responsive Styling Inheriting Issues

but just to make sure it isn’t some other problem

1 Like
#2

Hi @alexander just a heads up on this one… on further looking I think this is unrelated to the ticket mentioned above.

Do you think you could confirm the problem?

in summary,

base point set for L - 2 equal columns
responsive change for M - 2/3 1/3 columns
responsive change for S (& therefore XS) single columns

the changes after the M responsive screen size (S & XS) do not work as per the video

#3

Thanks Scot! Got this one figured out. Both CSS rules were outputting, but they were in the wrong order so the smallest size was always getting overwritten. Fixed for next patch.

2 Likes
Beta 2 Bug: Responsive Styling Inheriting Issues
#4

Excellent news and thank you for your hard work

#5

You’re most welcome!

1 Like
#6

This appears to be working, Thanks!

#7

Oh wait, I spoke to soon

the XS and S settings are now working, but the M setting is currently being ignored on the front end

Screenshot 2021-08-07 at 12.48.09
Screenshot 2021-08-07 at 12.48.092466×1704 352 KB
Screenshot 2021-08-07 at 12.48.27
Screenshot 2021-08-07 at 12.48.271998×1850 509 KB

#8

Thanks @scotbaston, I think we’re really close here. Would it be possible for me to see that URL live on the front end? If not, could you export the page as a template and send it to me? Thank you!

#9

@alexander here you go…

If you need login access please let me know

#10

Thank you, I’m sorry, if you don’t mind that would be really helpful to login.

The CSS is outputting like this:

@media screen and (max-width: 978.98px) {
  .e1os-17 > .x-row-inner > *:nth-child(2n - 1) {
    flex-basis: calc(33.33% - var(--tco-gap-col));
  }
  .e1os-17 > .x-row-inner > *:nth-child(2n - 0) {
    flex-basis: calc(66.66% - var(--tco-gap-col));
  }
}
.e1os-17 > .x-row-inner > *:nth-child(2n - 1) {
  flex-basis: calc(50% - var(--tco-gap-col));
}

But the media query should always come after the base style. This is what I thought I had sorted out for beta 3, but maybe it’s back to the drawing board here. :open_mouth:

#11

here you go… Don’t worry about breaking anything on that site as its a pure stagin copy for beta testing

#12

Thanks! So I just triggered the WordFence rate limiter… sorry. It rejected the password and I probably tried too many times. I’ll add my IP in a secure note, or you could disable it for now

#13

Cleared the block and changed the password

#14

Thanks! I’m in!

#15

My Pleasure

#16

Thanks again! I was able to finally get this worked out. I was never able to reproduce it, but seeing it on your site helped narrow things down. I installed a patched version on your staging site to confirm.

1 Like