Adjust text width slideshow h1 - Spark theme

Solved
INFRA
Shopify Expert
42 0 20

Hi there,

I'd like to adjust the text width of the title on the slideshow, it's too narrow at the moment and I'd like "natural pharmaceuticals" on 1 line as shown below:

 

Screenshot 2021-07-21 at 10.20.28.png

 

website: https://trg-natural-pharmaceuticals.myshopify.com/ password: honevo

Is this possible? Thanks so much in advance!

0 Likes
Nick_Marketing
Shopify Partner
286 53 71

This is an accepted solution.

Hi,
Here's the solution, go to assets/index.css file and place this code at the very bottom.

 

 

.slideshow__content-inner {
    max-width: 55rem;
}

 


You could try increasing rem to 60, 65, or 70 if you like.

- I help businesses with eCommerce and Marketing Technology integrations.
- For consulting work inquiries, please send me a Private Message.
- Presently working in Toronto, CANADA.
INFRA
Shopify Expert
42 0 20

Thanks so much @Nick_Marketing  that worked perfectly!  Do you know where I can adjust the height of that button as well? It's a bit high at the moment! I've tried changing the padding in the index.css file but nothing happens :). Thank you!

0 Likes
Nick_Marketing
Shopify Partner
286 53 71

To change the button height, find line #8381 in index.css. Edit accordingly.

2021-07-20 22_03_08.png

- I help businesses with eCommerce and Marketing Technology integrations.
- For consulting work inquiries, please send me a Private Message.
- Presently working in Toronto, CANADA.
0 Likes
INFRA
Shopify Expert
42 0 20

hi @Nick_Marketing  thanks for taking a look!

This is the code on that line.  When I change the 4 or 7 nothing happens, and when I change 'large' into medium, it just reduced the space between the text above the button and the button itself

Should there be css for the slideshow button itself too?

 

.slideshow__heading + .slideshow__button,
.slideshow__subheading + .slideshow__button {
  margin-top: calc(4px * 7);
  margin-top: var(--spacing-medium-large);
}

 

0 Likes
Nick_Marketing
Shopify Partner
286 53 71

Try  this one with (!important infront)

 

 

.slideshow__button {
margin-top: 50px !important;
}

 

 

 
If it doesn't work, open another question in the community, pertaining to this topic.

- I help businesses with eCommerce and Marketing Technology integrations.
- For consulting work inquiries, please send me a Private Message.
- Presently working in Toronto, CANADA.