How to move text left to right with theme editor when text is set to margin: auto

Store Design
1

Hello. How can I take advantage of the theme editor to move my content left to right when the content margins are already set to auto? Ideally I’d like to keep the position initially as margins auto to keep them centered.

These are inputted into the theme schema.

{
“type”:“range”,
“id”:“banner_content_position_left_desktop”,
“min”: 0,
“max”: 20,
“step”: 1,
“unit”: “rem”,
“label”: “Content position adjust”,
“info”:“Moves Content Left”,
“default”:0
},
{
“type”:“range”,
“id”:“banner_content_position_right_desktop”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “rem”,
“label”: “Content position adjust”,
“info”:“Moves Content Right”,
“default”:0
},
this is the css taking the schema to inject into the theme

.hero-banner-slider .slide-{{ block.id }} .banner_content {
margin-bottom: {{ block.settings.banner_content_position_up_desktop }}rem;
margin-top: {{ block.settings.banner_content_position_down_desktop }}rem;
margin-right: {{ block.settings.banner_content_position_left_desktop }}rem;
margin-left: {{ block.settings.banner_content_position_right_desktop }}rem;
}

2

Hi @pedropmedina ,

You try changing this code:

{
	"type":"range",
	"id":"banner_content_position_left_desktop",
	"min": 0,
	"max": 20,
	"step": 1,
	"unit": "rem",
	"label": "Content position adjust",
	"info":"Moves Content Left",
	"default":0
},
{
	"type":"range",
	"id":"banner_content_position_right_desktop",
	"min": 0,
	"max": 100,
	"step": 1,
	"unit": "rem",
	"label": "Content position adjust",
	"info":"Moves Content Right",
	"default":0
},

this is the css taking the schema to inject into the theme
.hero-banner-slider .slide-{{ block.id }} .banner_content {
	margin-bottom: {{ block.settings.banner_content_position_up_desktop }}rem;
	margin-top: {{ block.settings.banner_content_position_down_desktop }}rem;
	margin-right: {{ block.settings.banner_content_position_left_desktop }}rem;
	margin-left: {{ block.settings.banner_content_position_right_desktop }}rem;
}

If you find this answer helpful, please mark it as a SOLUTION.

Best regards.

3

Yes.

4

Issue resolved.