Solved

Adjust text width slideshow h1 - Spark theme

INFRA
Shopify Expert
124 0 51

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!

Accepted Solution (1)

Nick_Marketing
Shopify Partner
1487 336 462

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.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 5 (5)

Nick_Marketing
Shopify Partner
1487 336 462

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.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
INFRA
Shopify Expert
124 0 51

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!

Nick_Marketing
Shopify Partner
1487 336 462

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

2021-07-20 22_03_08.png

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
INFRA
Shopify Expert
124 0 51

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);
}

 

Nick_Marketing
Shopify Partner
1487 336 462

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.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).