XF 2.2 4 boxes in row on desktop, how to column them in mobile ?

[Deleted member 184953]

This is the CSS code, what should I add to it so that my 4 boxes are vertically aligned on small screens?

.box-container {
    display: flex;
    }
    
    .column {
        display: flex;
        flex: 1 1 250px;
        font-size: 21px;
        font-weight: 400;
        margin-left: 0;
        padding: 8px;
        text-align: center;
    }

]

Many thanks.

 

[Paul B]

Can you link to the page where it's being used?

 

[Deleted member 184953]

Sure, https://regionalis.fr
the 5 coloured boxes (not 4 sorry) on top home.

 

[Paul B]

They disappear as soon as I reduce the screen width.



If I disable that then they are aligned at the top.

 

[Deleted member 184953]

Yep, actually i disabled them because i cant do what i want in mobile screen.
I would like the boxes to be one below the other in mobile mode...

 

[Paul B]

That would push the content down more.

However, if that's what you want, just disable this in the media query.

 

[Deleted member 184953]

Ok, you're right i have to think to something else to display those links in mobile view.

 

[beerForo]

Nice site, I like the footer.

 

[Deleted member 184953]

Thank you, i appreciate @beerForo

@Brogan regarding your post here : https://xenforo.com/community/threads/clip-the-apex.19440/post-1564266
I'm having a PWA issue, an error message says my site content isn't sized correctly for the viewport. Yet it is the original style and even disabling my HTML widget I have the same error, where can this come from?

 

[Paul B]

Ok, you're right i have to think to something else to display those links in mobile view.

I would probably go for something like this if I was going to implement that.

 

[Deleted member 184953]

Yep, like this is not bad !
How did you do that, playing with font-size and paddings ?

 

[Paul B]

Yes, just editing the CSS at the narrower viewport.

Font size set to 12px and height set to 100%.

You can reduce the text by changing e.g. Forums du quotidien to Au quotidien and Forums de l'actualité sportive to Actualité sportive.

 

[Deleted member 184953]

Perfect, thanks.

 

[beerForo]

Nice!

 

[Deleted member 184953]

You can reduce the text by changing e.g. Forums du quotidien to Au quotidien and Forums de l'actualité sportive to Actualité sportive.

It's Numérique, science et innovation which is problematic. I didn't find how to reduce the text without losing clarity

Font size set to 12px and height set to 100%.

I just used height to 100%