Sharma cart is off

Visual Editor Help
,
1

How to fix these circles being off center on shopify?

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. builder.io/content/4cab34394e684fe7b93d6ef5493a8a51
off

Builder public api key
go to Builder.io: Drag and drop page builder and CMS and copy your PUBLIC api key

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Do you want to center the text inside these circles, or center the circles themselves?

Can you also share the Builder content link for this page? It looks something like: http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51

3

Hi yes
I want to center the circles and the sizes in the circles please.

4

You can center the text in each circle by selecting the “Option Box” layer and editing the css properties to change ‘display’ to ‘grid’ and adding a new property, ‘placeItems’ and setting it to ‘center’.

Layers tab
Style tab

It looks like the circles are already centered on the page, but they are too big to fit on the screen. You can fix this by going into your mobile preview and changing the size of the same “Option Box” layer, for example, to 40px wide and 40px tall.

5

How do I get to that menu?

6

In your editor, you can access the CSS Properties in the style tab.

You can access your layers in the layers tab.

7

css
css2521×1256 264 KB

Hi I dont see where I can open CSS under option box?

8

HI can you help please.
:grinning:

9

If you click on the “Option Box” layer in the layers tab, you can edit the styling for that layer in the right side toolbar under “CSS Properties”

Screen Shot
Screen Shot1709×670 157 KB

10

HI Sarah,

I had to delete the whole thing because it wouldn’t add to cart.
:frowning:

11

We would be happy to help you fix that. With a growth plan you can access 30 days of history for your page so you can easily recover your content: History in Builder.io - Builder.io . If you choose to rebuild the section instead, please let us know if you run into this issue again.