How can I center my logo on smartphone and tablet only?-CodePudding

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?

CodePudding user response：

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%;
    }

}

CodePudding user response：

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;
    }
}

CodePudding user response：

First, i want to be clear that !important! doesnt 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 {}

CodePudding user response：

@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.