Change of text position to the extreme middle right

Solved

Change of text position to the extreme middle right

Shamail
Visitor
3 0 1

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/

Screenshot (10).png

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 220

This is an accepted solution.

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

Screenshot 2023-12-30 at 08.30.59.png

Hope that helps! 

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 3 (3)

PaulNewton
Shopify Partner
6350 582 1355

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:

PaulNewton_0-1703875974038.png

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Made4uo-Ribe
Shopify Partner
6827 1629 2007

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:

Made4uoRibe_0-1703880365344.png

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

ZenoPageBuilder
Shopify Partner
1052 203 220

This is an accepted solution.

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

Screenshot 2023-12-30 at 08.30.59.png

Hope that helps! 

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com