Center logo and button on mobile only

  • Resolved pauldelart

    (@pauldelart)


    1 year, 7 months ago

    Hello,

    I’m trying to center two elements of my webpage on mobile only (they look fine on desktop version)

    • The website logo located in the header
    • The second green CTA button after the text introduction

    Using Gutemberg editor I can center them both on desktop and mobile, but I’m looking to center them only for users on mobile.

    I’ve tried using custom CSS found on forums, but I feel the theme has tweaked a little to much of wordpress for those code snippets to work.

    Any help on how to achieve those would be much appreciated!

    Best

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @pauldelart,

    Thanks for reaching us,

    For centering the logo and button on mobile devices, Please try adding this CSS inside **WordPress Dashboard > Appearances > Customize > Additional CSS** and check it once:

    @media screen and (max-width: 768px){
    .tg-block.tg-block--one{
    flex: auto;
    }
    .site-branding{
    flex-direction:row-reverse;
    }
    .blockart-buttons-667a6f7c {
    flex-direction: column-reverse;
    }
    }

    Let me know if this helps you or not, and I will be back.

    Regards

    Thread Starter pauldelart

    (@pauldelart)

    Hi @barsha04 ,

    thanks a lot for your help.

    Your code works well on my desktop navigator when I resize the window, then the two elements are correctly centered.

    Unfortunately, the elements are not centered when I go on the page using an actual mobile phone.

    Any clue on how to fix that?

    All good on mobile as well, as guess the cache had to be cleared.

    Best,

    • This reply was modified 1 year, 7 months ago by pauldelart.

    Hi @pauldelart,

    Glad to hear that the issue has been fixed. Let me know of any other confusion or issues in the future and I will be back.

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center logo and button on mobile only’ is closed to new replies.