How to center section?

Store Design
, , , , ,

Topic summary

A user needed help centering a circular bar section on their Shopify homepage, specifically for desktop devices only. An attached screenshot showed the misaligned element.

Two solutions were provided:

  1. CSS adjustment: Remove existing margin-left property from the theme’s CSS file (accessed via Online Store > Themes > Edit code)

  2. Custom CSS injection: Add specific CSS code to the theme.liquid file, placed above the </body> tag, to center the element using media queries for desktop screens

Resolution: The user confirmed the second solution worked perfectly, successfully centering the section as intended.

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

Hi everyone, how do I center this circle bar section at my homepage? Only at computer device

Link for my website (theme not active).: https://lvlbud235v7jh70z-57068945600.shopifypreview.com

Thank you so much, hope someone can help me out here!

Skærmbillede 2024-11-19 kl. 14.19.39.png
Skærmbillede 2024-11-19 kl. 14.19.39.png2992×1184 320 KB

.

.

.

.

.

.

.

.

@GemPages_Agents

@KetanKumar

@hammadCodes

@PaulNewton

@Ninthony

@dmwwebartisan

@ExpertRookie

@MandasaTech

@GemPages

@Mike-Omega

@PageFly-Richard

@tobebuilds

@BSSCommerce-B2B

@BSS-TekLabs

2

Hello @stinem123 , Please remove this CSS of margin-left.

Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. Else find this CSS in the “theme.liquid” file.

Screenshot from 2024-11-19 18-53-45.png
Screenshot from 2024-11-19 18-53-45.png1826Ă—938 310 KB

Screenshot from 2024-11-19 18-53-50.png
Screenshot from 2024-11-19 18-53-50.png1826Ă—938 309 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

3

Hey @stinem123

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732023207370.png
Moeed_0-1732023207370.png1152Ă—691 158 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

@Moeed thank you so much, it worked perfectly!

1 Like
5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like