Question 2440 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I center my logo on smartphone and tablet only? – WordPress

I have created my portfolio for graphic design on the url sebastianpettersson.se. The theme I’m using is called Lekker by Code Interactive. I have searched their support forum but sadly not found any solution to this issue.

My issue is:
I would like to have my logo horizontally centered when my visitors is viewing my page on smartphone or tablet. I’m somewhat a semi novice when it comes to css but tried using this code for it but it sadly does not work.

@media only screen and ( max-width: 993px ) {
    .qodef-header-logo-link
        text-align: center !important!;
    }
}

(Note that I’m also using a code to hide a button on smartphone and tablet but I’m pretty sure it’s not interfering with it). Posting it to incase that is causing an issue.

@media only screen and ( max-width: 993px ) {
    .qodef-m-lines{
        display:none !important;
    }
}

Any ideas or suggestions?

Tags:

4

Answers


  1. 0

    You can center your logo by setting margin-left to auto, as it already uses margin-right: auto:

    @media only screen and ( max-width: 993px ) {
    .qodef-header-logo-link
        margin-left: auto;
    }
}
    Login or Signup to reply.
  2. 0

    Set width100% and margin-right: auto; margin-left: auto;

    @media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
       margin-right: auto;
       margin-left: auto;
       width: 100%;
       max-width: 100%;
       min-width: 100%;
    }

    }

    Login or Signup to reply.
  3. 0

    First, I want to be clear that !important! doesn’t work you should use !important with only one!

    Second, you can use margin: 0 auto; to center images,

    Third, use flexbox:

    display: flex;
justify-content: center;

    Tip, try using

    • @media only screen and (min-width: 450px) for small devices {}
    • @media only screen and (min-width: 800px) for bigger devices {}
    • @media only screen and (min-width:1100px) for even bigger devices {}
    Login or Signup to reply.
  4. 0

    @Robo Robok ‘s solution is the way to go. You could also try learning more about positioning and layouts by experimenting with display: flex.

    The following change to your header will also work, if you want to alter the position of your collapsible menu too:

    @media only screen and (max-width: 993px) {
    #qodef-page-mobile-header {
        display: flex;
        justify-content: center;
    }
}

    Also, you should have a look at your collapsible menu not appearing below 994px of resolution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search