Centering Two Things

Hi there,

I believe this is the CSS you are looking for:

.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
    float: none;
    text-align: center;
}

Secondly, on the product page is there a way to center the title and on our particular page the Compare 1 Prices title?

Not sure if I fully understand. Can you link me to the specific page in question?

Thanks but that code didn’t seem to work for moving it over to center.

As for the second page: https://www.runningshoes.guru/product/nike-womens-nike-air-zoom-alphafly-next-flyknit-womens-running-shoes-bright-mango-citron-pulse-metallic-red-bronze-size-8-0-2/

Lastly, I noticed after I added the right sidebar to a page, the mobile version no longer places the left sidebar at the top and the right sidebar at the bottom. I had initially used this code but assume I need to change it to something else:

@media (max-width: 768px) {
    .left-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Wait, technically the code you sent works. But when I also add this code to center the title it kicks it back and forth. What would I use to make both centered?

h1.page-title {
    text-align: center;
}

}

Looks like your code has an extra closing bracket }?

Oh, thanks for the catch. How about these two items from above?

As for the second page: https://www.runningshoes.guru/product/nike-womens-nike-air-zoom-alphafly-next-flyknit-womens-running-shoes-bright-mango-citron-pulse-metallic-red-bronze-size-8-0-2/

Lastly, I noticed after I added the right sidebar to a page, the mobile version no longer places the left sidebar at the top and the right sidebar at the bottom. I had initially used this code but assume I need to change it to something else:

@media (max-width: 768px) {
    .left-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Hi @adviceassistant ,

I don’t think that CSS is valid.

There’s no .site-content child of .left-sidebar. It’s the other way around.

Try using this:

@media (max-width: 768px) {
    .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Thanks!

No problem. ??