Social Icons/Button Displaying Incorrectly on Mobile

frostii

Hi all, I am currently experiencing some home page alignment issues on mobile. On larger screens, my logo, custom button & social icons are left aligned, which is as I require; however, when looking at my site on mobile the logo is centred, the button right aligned and the social icons left aligned.

https://www.chrisfrostphotography.co.uk/

I am keen to have them all centred on mobile if possible, at least for portrait orientation, but have struggled to find the correct CSS code to make that happen and would be very grateful of any advice please.

Thanks!

Hikin' Mike

Since this is just for your home page, just add a CSS Block to you home page and add this:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget-button .sm-page-widget-button-align-right {text-align: center;}

  .sm-user-ui .sm-page-widget-social-links.sm-flex-justify-start {justify-content: center;}

} 

Hikin' Mike

To add, there is no "Portrait" or "Landscape" orientation as far as CSS mobile devices. For SmugMug, any screen 736px or smaller is a mobile.

frostii

That's awesome Mike - thanks so much for this! I had spent a few hours blindly trying to resolve but this works perfectly.

frostii

Sorry Mike, one additional question if possible. Is there a quick way to amend the logo too; it is aligned slightly off centre (slightly right)?

Thanks in advance

Hikin' Mike

Your current logo is NOT centered.

Trim it in Photoshop or similar.

Hikin' Mike

You can use this. I just trimmed the excess transparency.

frostii

Many thanks again Mike!