Shella theme / Alignment Position For Slider Images

Topic summary

A Shopify store owner using the Shella theme needs help repositioning slider/promo box text from center-aligned to left-aligned, occupying maximum 50% width with appropriate margins.

Solution Provided:
A support representative from ZestardTech supplied custom CSS code to be added to the theme’s style.css file. The code uses media queries (min-width: 768px) to:

  • Set max-width to 30%
  • Add 20px left margin
  • Apply flexbox properties (align-self: flex-start, align-items: flex-start)
  • Force left text alignment

Current Status:
The CSS successfully resolved the initial alignment issue. However, the user now has a follow-up requirement: they want selective control over individual sliders—some centered, some left-aligned—rather than applying the same styling to all promo boxes. They’ve asked multiple times if this selective styling is possible but haven’t yet received a response to this specific question.

The discussion remains open with the user awaiting guidance on implementing mixed alignment across different slider elements.

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

Hello,

Im struggling with changing how text is aligned on all my sliders ( promo boxes).

Text is central and aligned to the centre.

I would love this to be aligned to left and take max 50% of the width. (also not to the very edge obviously, with some gap from left side) screen attached.

Help please Im desperate.

https://artisanroast.co.uk/

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset-> style.css and paste this at the bottom of the file:
@media (min-width: 768px) {
.promobox__content {
  align-self: flex-start; 
  max-width: 30%; 
  margin-left: 20px;
}
}

1 Like

Hello,

thank you for this but I am afraid it’s not working. I have followed your instruction but nothing changed.

1 Like

Hello there,

Please remove copy text.

1 Like

Brilliant, this worked. Thank you.

Would it be possible for header, text and button to be aligned to the left also? These are still central (even if the whole black moved correctly!

thank you,

luk

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset-> style.css and paste this at the bottom of the file:
@media (min-width: 768px) {
	.promobox__content {
	  align-self: flex-start; 
	  max-width: 30%; 
	  margin-left: 20px;
	  align-items: flex-start !important;
  	  text-align: left !important;
	}
}

1 Like

Amazing thank you very much.

This is completely sorting out my issue.

I do have very last question, is there a way of applying all the changes above to some of the elements and some not? If I were to have multiple sliders / promo boxes and I would like some of them with text aligned central and some to the left as you shoed me?

1 Like

@ZestardTech any chance we could make some of the slide content central rather than aligned to the left? I am having problem with that.

thanks,

luk

@ZestardTech here here please! (sorry for being pushy but Im on th edge of having my problem sorted) Is there a way to have some slides aligned to left but some central?)

thanks,

luk