Center view counter custom code

Store Design
,

Topic summary

A user added custom code for a product page view counter but needs help centering it to match their site’s centered layout.

Initial Solution Provided:

  • Add CSS to assets/base.css targeting .live_visitors class
  • Code includes justify-content: center and adjustments to the ::before pseudo-element positioning
  • Also centers .product-form__buttons using margin: 0 auto

Current Status:
The proposed CSS solution did not work when implemented. The helper requested a screenshot to verify where the code was added and subsequently suggested placing the CSS at the top of base.css instead of at the end.

Issue remains unresolved - awaiting confirmation of proper code placement and further troubleshooting.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi I added a custom code for a view counter but I need it centered as everything else is centered. Can someone possibly help id be so grateful. Store: https://studio-seductress.com/

Screenshot 2025-02-02 at 1.15.25 PM.png
Screenshot 2025-02-02 at 1.15.25 PM.png2714×1586 298 KB

1 Like
2

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.live_visitors.no-js-hidden {
justify-content: center;
}
.live_visitors::before{
left:22%
}
.product-form__buttons {
    margin: 0 auto;
}

devcoders_0-1738471454636.png
devcoders_0-1738471454636.png1323×453 140 KB

3

Hi unfortunately this didnt work

1 Like
4

Hello @studioseductres

Where did you add the CSS? Can you send me a screenshot?

5

Hello @studioseductres

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the top of the file.

1 Like