XF 2.1 Help with centering

[beerForo]

"View more" buttons... float right is the default.

.block-footer:not(.block-footer--split) .block-footer-controls {
    float: none !important;
    text-align: center !important;

I can figure out how to left align, just put float left. But can't center it since float center does not exist, so I tried to put float none and text-align center it, but no-go.

Would I have to edit the actual template to do this or can extra.less do it?

PS. I like it left aligned on full site, and centered on mobile (the buttons are good for each hand)... but I don't even know if that's possible. Ideally, left... and center on mobile.

Thanks for any help!

 

[beerForo]

I have them left aligned now but still can't figure out how to center with css.

 

[beerForo]

Any help appreciated.

 

[Dynamic]

Hi mate. Try margin: 0 auto;

If you can link me to your site I can take a look.

Thanks.

 

[beerForo]

That puts it back on the right because the float: right property takes over. I think the issue is there is no such thing as float: center so no matter what you put in extra.less, the template will take precedence and a template edit is needed to align it to center, which I am trying to avoid.

 

[beerForo]

If you can link me to your site I can take a look.

It's just this standard button:



Really I'd like it centered on mobile only. Trying to get it so it's handy for either thumb.
IF that's possible.

 

[Kevin]

It's just this standard button:

View attachment 219849

Really I'd like it centered on mobile only. Trying to get it so it's handy for either thumb.
IF that's possible.

Try this in your extra.css

@media (max-width: 650px) 
{
    .block-footer {
        text-align: center !important;
    }
    .block-footer-controls {
        float: none !important;
    }
}

 

[beerForo]

THANKS!
Great for mobile, either hand.

 

[beerForo]

@Kevin
One snag!
When I use this for the full site to bring it left, it also does on mobile. How can I do both? Thanks again!

.block-footer:not(.block-footer--split) .block-footer-controls {
    float: left !important;
}

 

[Kevin]

@Kevin
One snag!
When I use this for the full site to bring it left, it also does on mobile. How can I do both? Thanks again!

.block-footer:not(.block-footer--split) .block-footer-controls {
    float: left !important;
}

You should be able to just do a reverse media tag using min-width instead of max-width. Something along the lines of...

@media (min-width: 650px) 
{
    .block-footer-controls {
        float: left !important;
    }
}
@media (max-width: 650px) 
{
    .block-footer {
        text-align: center !important;
    }
    .block-footer-controls {
        float: none !important;
    }
}

 

[beerForo]

Brilliant! Now I know, thanks!

 

[Kevin]

Brilliant! Now I know, thanks!

Glad to see you got it working the way you wanted. I like the idea of centering the controls on small screen devices and may borrow that idea for my own sites.

If you want to make it a little more 'XF correct', instead of hard-coding the "650px" you can use the variables @xf-responsiveNarrow, @xf-responsiveMedium, or @xf-responsiveWide. These correspond to the "Responsive" break point values in the style properties (ACP => Appearance => Styles => {style} => Style Properties => Page Setup). If you haven't changed any of those values then using "650px" is fine as that is the default break point value for @xf-responsiveMedium but if you have changed the values in any of your styles then you'll want something like the below.

@media (min-width: @xf-responsiveMedium) 
{
    .block-footer-controls {
        float: left !important;
    }
}
@media (max-width: @xf-responsiveMedium) 
{
    .block-footer {
        text-align: center !important;
    }
    .block-footer-controls {
        float: none !important;
    }
}