Adjusting position of text and button on slideshow DEBUT theme

[Kavia11]

Hi,

I would like to move the Text and Button for the Slideshow from the center to the left in this picture, how do I do that? I tried to do the same setting that I did with the non-slide show section, but it is not working. 

Appreciate some guidance. The slide show is currently not enabled.

My store URL is https://rugged-dapper-man.myshopify.com/ 

Thanks,

Kavi

[KetanKumar]

@Kavia11 

sorry for this issue yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.text-center .mega-subtitle {max-width: 100%;}
.hero__inner .page-width.text-center {text-align: left !important;}

[Kavia11]

@KetanKumar 
I did that and it doesn't do anything.

The word is still in the middle of the pic. Below is my current code in Asset->/theme.css

Thanks,
Kavi

[KetanKumar]

@Kavia11 

sorry for this i can see one css error

if possible to add me on staff so i will quick fix 

[Kavia11]

Hi @KetanKumar 

Will the changes remove other existing setup that I have on my store?

I also noticed the Main Pic on the home page, if I change it, it becomes too dark. I don't have Overlay option to disable it, so not sure why it is dark.

Can you take a look at that as well? 

[KetanKumar]

@Kavia11 

can you pleases share issue images?

[Kavia11]

 I enabled the Slideshow with 2 banners. The text is still in the middle and does not fit well. Can this be changed?

Also, when I viewed the website via mobile, the pictures appear off and not showing the entire content. Even the words are not appearing.

But on the laptop it is fine.

[KetanKumar]

@Kavia11 

too much smaller

[Kavia11]

yes, can we have it changed? so that it looks good on both desktop and mobile?

[KetanKumar]

@Kavia11 

yes, please add this code

@media only screen and (max-width: 749px) {
.slideshow__image {
background-size: contain;
}
}

[Kavia11]

Do I add it at theme.css? 

as below:

[Kavia11]

I did it, still not looking great. Let me give you access to the store @KetanKumar 

[KetanKumar]

@Kavia11 

thanks i will update code 

[Kavia11]

Hi Ketan,

Did you manage to check the code? Was there any issue?

Thanks

[KetanKumar]

@Kavia11 

yes, please check i have update 

[Kavia11]

@KetanKumar 

Doesn't seem to look different on mobile, can you share what you did please?

The text and button also the same. 

[KetanKumar]

@Kavia11 

do you have remove this?

[Kavia11]

@KetanKumar What do you mean by "removing this"?

[Kavia11]

Please see below for more information. This is for mobile viewing. 

This is how it looks like on mobile if I don't use slide show and use the image. The text used to be on the side and you can see the Shop Button is in the picture and not out of it. 

Now when I use the slide show, it becomes like below. As you can see the images are small and the button is not on the pic and is out of it and looks off. Can this be fixed?

[KetanKumar]

@Kavia11 

your image is too much smaller also yes is a possible to button above to banner if set this so doesn't show your proper banner look is this fine?

[Kavia11]

@KetanKumar 
I used the recommended image size. What image size should I use?

And what do you mean by moving the button to the banner will not show the banner properly?

Even for the desktop version of the slideshow, can I move the button to the left side and maintain the mobile version at the center? 

[KetanKumar]

@Kavia11 

can you please upload your image 1920x650 pm make your all content and graphic work centered it much better way

also your mobile device text and button below image so it good view for custom at the banner 

[Kavia11]

@KetanKumar 

I did that and it looks much better now.

Thank you for that help.

Still not that great but better than before 🙂 

[KetanKumar]

@Kavia11 

can you please share your current system screenshot?

[MS-WEB-DESIGNER]

Dear @Kavia11 

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
.index-section--slideshow .slideshow__text-content.text-center { text-align: left !important; }
.index-section--slideshow .text-center .mega-subtitle {max-width: 100%;}
.index-section--slideshow .hero__inner .page-width.text-center {text-align: left !important;}
/* End*/

• Save and check your theme by refreshing it.

[Kavia11]

Dear @MS-WEB-DESIGNER 
This will help to adjust text and button positioning I assume?

I have another issue where the images are off on mobile but it is ok on desktop. Guruji @KetanKumar is taking a look at it now I believe. 

[Kavia11]

@MS-WEB-DESIGNER This didn't do anything to the desktop. On mobile, it moved it a bit to the left but still look off.

Do see the pic below.