Site logo

Archived topic

How to put my sidebar in center (mobile version)

7 replies · Started by Margot on May 4, 2021

Viewing posts 1–8 of 8

Hello there,

I would like to put my sidebar in center in my site's mobile version. In two pages (accueil / qui somme-nous), my sidebar is before content and it is in center. But in my other pages, my sidebar is located left. How can I put it in center too ?

Thank you by advance,

Margot

Hi there,

I'm not exactly sure how you want it to be laid out.

The sidebar goes to the bottom of the content by default on mobile but I'm not exactly sure what you mean by "center".

Can you explain a bit more? Perhaps provide any mockup image of how you want it to look on mobile?

Let us know.

I wanted my sidebar to be up in these two pages and down in the other pages. My issue is about the layout of logos (sidebar) in mobile version. We can see that when sidebar is up, it is in center of screen and when sidebar is down, it is just a little bit left according to alignement. Is it clearer ? I'm sorry, my english is not really well.

I would like my sidebar in alignement center according to mobile'screen in the two cases, when it is up and when it is down.

I wanted my sidebar to be up in these two pages and down in the other pages.

You can create a hook element with hook set to wp_head.

You then add this code.

<style>
@media(max-width:768px){
div#content {
    display: flex;
    flex-direction: column-reverse;
}

.inside-left-sidebar > .widget > * { margin: auto; }
}
</style>

You then set the display rule location to add in accueil and qui somme-nous pages.

This is how it will look like - https://share.getcloudapp.com/RBuYRjbn

Let me know if this is what you're trying to do.

Thank you, I did this but I found that it is not what I wanted... My sidebar is already up and down where I want it to be. I just would like to center it when it is down, because it is already centered when it is up. It is juste about alignement.

Can you go there https://www.dognose.fr/generatepress/ ? I tried to explain with a screen capture.

All of this is just for mobile version.

Thank you in advance,

Margot

Hi there,

add this CSS to your site:

.inside-left-sidebar figure {
    margin-left: auto;
    margin-right: auto;
}

Thank you very much, it worked ! Have a nice day

YOu're welcome

This archived topic is closed to new replies.