FROM CACHE - en_header

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

pedropmedina
Shopify Partner
6 0 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;
}
 
 
Replies 3 (3)
AvadaCommerce
Shopify Partner
3879 835 739

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

pedropmedina
Shopify Partner
6 0 1
pedropmedina
Shopify Partner
6 0 1