Full Screen - Double 3 column row - Strange behavior


#1

Hi @Norm and others

To be honest I do not know if this is a simple bug or a misunderstading on my part.

I have created a bloc using the 3 column structure which I duplicate in the same bloc. Under each padding it looks fine but when I go Full Screen they are no longer aligned vertically:

http://recordit.co/FQClOom0S3

Thanks in advance for any input.

MDS


#2

looks like in fullscreen it keeps the padding1
Quickfix will be adding the padding to both structures

and fix the center spacing with some classes margin 1px on each side


#3

Hi @Nyokhix

Thanks. However, I do not want them to be all aligned horizontally but to remain 3 images on two lines.

Like when it is a bloc padding of 200px

For whatever reason when it is full screen it changes to horizontal all on the same line.

@Norm is this a bug ?

MDS


#4

Hi @MDS :smiley:

Here’s one way to do it.

Another way could be to put the sets of three columns in separate divs.

Cheers / Johny


#5

Hi @Jakerlund

Hope you’re recovering well.

Many thanks for putting up the video. I had found ways to work around this although was and still wondering why it changes when full screen is applied.

MDS


#6

You learn something every day. If you would have started the same way and just duplicated the last column 3 times (not the row once) then add the padding to the top image everything will be perfect.

@Jakerlund showed another way, but I think just using a three column and duplicating the last column is a little easier.

Casey


#7

@MDS Thanks, healing slowly and painfully :woozy_face:

I had no idea that duplicating the first three column would react like it did.
I was just curious how to make it work.
It’s clear that bootstrap 3 and 4 works different and that things we’re used to do doesn’t behave the same in BS4.
But it’s good to find these quirks and ways around them.

Take care :+1:


#8

Hi @casey1823

Indeed we do learn constantly.

However what I’m trying to point out is that the behaviour is not consistent when you have for example the padding of 200 the two rows are one above the other but then when you change to full screen they collide.

I’m used to the fact that sometimes other behaviours are not consistent reason why I’ve been finding work arounds either in the way you actually built things or by adding some code.

From my experience, I have also noted that wrapping elements around a DIV usually helps as well.

Anyway it is no longer big deal. :wink:

MDS


#9

Hi John @Jakerlund

Would expect to be healing slowly but sorry to hear it is still painful :open_mouth:

I totally agree - I am a bit the same as I do not stand things not working the way I would expect. The good thing is that it challenges us to find other ways.

Indeed, need to forget past habits :wink:

Thanks again for insight and assistance.

MDS


#10

The real question is @Norm why would Blocs 3 act like that?
Even though @Jakerlund made a really good video of another way. :slight_smile: