Change the text position on an image on a slideshow

[Mohd01]

Hi all!

I am trying to change the position of the text on the images of my slideshow in the homepage. I want it to be on the far left.

 

That's how it looks currently and I want the text to be on the far left. I have set the desktop content position to bottom left and desktop content alignment to left but it didn't help. I want to do that for all the images on my slideshow. I would really appreciate any help!

Thanks in advance
Theme: Dawn theme

[websensepro]

Hi @Mohd01 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Mohd01]

Hey!
Here is the URL: https://ravf1p-wc.myshopify.com/

[Tech_Coding]

Hello @Mohd01 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[Mohd01]

Hey!
Here is the URL: https://ravf1p-wc.myshopify.com/

[websensepro]

Hi @Mohd01 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:768px){
.banner__content.banner__content--bottom-left.page-width.scroll-trigger.animate--slide-in {
    padding-left: 0px !important;
    margin-left: 50px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Mohd01]

Hey!
I really appreciate ur help and time. The solution you provided only fixed it for the first image only and not for the other images, so if you have any idea how to do it for the other images i would really appreciate it!

[websensepro]

@Mohd01 

Give me the store view link, not the Shopify access.

[Mohd01]

https://ravf1p-wc.myshopify.com/

[websensepro · Accepted solution]

@Mohd01 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:768px){
.slideshow__text-wrapper.banner__content.banner__content--bottom-left.page-width.banner--desktop-transparent {
    padding-left: 0 !important;
    margin-left: 50px !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Mohd01]

Thanks! It worked, I really appreciate it.

[Mohd01]

Hey, sorry for the bothering but do u know how to change the size of the product image below too? i want to make it wider

[websensepro]

Do you just want to make the product image wider?

[Mohd01]

Yes, so it is as wide as the image in the slideshow above 

[websensepro]

@Mohd01 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:768px){
.page-width {
    max-width: 100% !important;
    Padding: 0px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Mohd01]

Hey, it did indeed make it wider but also increased the height. I want it to be the same hight so that white space between the product image and the slideshow is still there.

[websensepro]

@Mohd01 Try this

.page-width {
    max-width: 100% !imortant;
    padding: 35px 20px !imortant;
}

[Mohd01]

Hey, sadly it did not make it wider 

[websensepro]

.page-width {
    max-width: 100% !imortant;
    padding: 35px 0 !imortant;
}

[Mohd01]

Hey man, I'm really sorry for the bothering but that didn't work as well. If you want. Again, I'm really sorry.

[LizHoang]

Hi @Mohd01 

You can  follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

.slideshow__text-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

Hope it helps. 

Liz