Change of text position to the extreme middle right

[Shamail]

How do i Change of text position to the extreme middle right? any help appreciated

Here is my store URL -https://40581e-3.myshopify.com/

[PaulNewton]

Be aware this wont look good on tablet/mobile as the text as no underlay to contrast it from the imagery, see example screenshot at end.

If your already using custom css fix the style rules padding values as they need px appened to each value

padding: 0 0 4px 2; >>> padding: 0px 0px 4px 2px;

to keep pushing it to the right wont work with padding as it will just shrink the space the text can exist in. Though to do it any you’d use the last value as the values start at the top then go clockwise:

padding: 0px 0px 4px 30px;

To move the banner content area over override the margin:

margin-right: 10px;

slideshow__text-wrapper.banner__content {
    padding: 1.5px !important;
    margin-right: 0px;
}

For mobile if the theme doesn’t have an underlay setting for the content , you’ll want to style backgrounds, underlays, to the text areas but there’s a bunch of work there as not all elements take up the same amount of space

Or as a customization to add an underlay, OR use a different image for small screens.

If you need to get this done and customized for you then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Example problem of mobile hero image text not having good contrast:

[Made4uo-Ribe]

Hi @Shamail

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.slideshow__text-wrapper.banner__content.banner__content--middle-right.page-width.banner--desktop-transparent.scroll-trigger.animate--slide-in {
    margin-right: 0px !important;
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[ZenoPageBuilder]

Hello @Shamail

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.slideshow__text {
    align-items: end;
    text-align: right;
}

The result

Hope that helps!