Adjusting position of text and button on slideshow DEBUT theme

Store Design
1

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.

Shopify theme.jpg
Shopify theme.jpg2556×716 119 KB

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

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

Thanks,

Kavi

1 Like
2

@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;}
1 Like
3

@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

Kavia11_0-1619515002347.png
Kavia11_0-1619515002347.png1484×1145 85.8 KB

Thanks,
Kavi

1 Like
4

@Kavia11

sorry for this i can see one css error

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

1 Like
5

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?

1 Like
6

@Kavia11

can you pleases share issue images?

1 Like
7

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.

1 Like
8

@Kavia11

KetanKumar_0-1619606259837.png
KetanKumar_0-1619606259837.png1920×1080 390 KB

too much smaller

1 Like
9

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

1 Like
10

@Kavia11

yes, please add this code

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

Do I add it at theme.css?

as below:

Kavia11_0-1619609032778.png
Kavia11_0-1619609032778.png1029×1140 88.8 KB

12

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

1 Like
13

@Kavia11

thanks i will update code

1 Like
14

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.
1 Like
15

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.

16

Hi Ketan,

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

Thanks

1 Like
17

@Kavia11

yes, please check i have update

1 Like
18

@KetanKumar

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

The text and button also the same.

1 Like
19

@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.

20210428_175322671_iOS.png
20210428_175322671_iOS.png1284×2106 195 KB

20

@Kavia11

do you have remove this?

1 Like