Changing the text size on the slideshow, venture theme

Alison_McDonoug
New Member
1 0 2

Im using the free Venture theme for my store, and I like everything except the text sizes on the slide show.  Is there a way to adjust this, possibly in the collecxtion.liquid file?  Any help would be greatlyappreciated, thank you! 

My store address

https://highpointoutdoors.com/

Phil_J
Tourist
39 0 3

Hey Alison, 

Both changes would need to happen inside your theme.css file. 

The big heading is going to be under the .hero__title class. The subheading is going to be under the hero__subtitle class.

Keep in mind that there are responsive style, so there will be multiple entries for both classes depending on the screensize. 

0 Likes
Find-Art-Co
Excursionist
16 0 15

Hello Allison!  Please note I am new into this (I'm not an expert at all and know anything on coding). After searching a lot on  the web and not finding an answer on this subject, I tried this (in a trial and error way until it worked):

 

1. As the experts recommend, make a copy of your theme and try the solution there first.

2. Go to "edit code" > Assets > theme.scss.liquid

3. Around the line 4386 you should see this code:

.hero-content__title {
  display: none;
  font-size: em(36);
  line-height: 1.2;
  margin-bottom: $gutter-slideshow;
  padding: 0 ($gutter-site / 2);
  background-color: $color-hero-title-bg;
  color: $color-hero-title-text;
  @include prefix(box-decoration-break, clone, webkit o spec);

  &:last-child {
    margin-bottom: $gutter-slideshow;
  }

  .hero-wrapper--adapt & {
    margin-bottom: 0.31rem;
  }

  @include media-query($medium-up) {
    font-size: em(60);

    .hero-wrapper--adapt & {
      margin-bottom: $gutter-slideshow;
    }
  }
}

4. Change it for the following:

.hero-content__title {
  display: none;
  font-size: em(30);  /*Here I changed 36 to 30 (new text size on mobile view)*/
  line-height: 1.2;
  margin-bottom: $gutter-slideshow;
  padding: 0 ($gutter-site / 2);
  background-color: $color-hero-title-bg;
  color: $color-hero-title-text;
  @include prefix(box-decoration-break, clone, webkit o spec);

  &:last-child {
    margin-bottom: $gutter-slideshow;
  }

  .hero-wrapper--adapt & {
    margin-bottom: 0.31rem;
  }

  @include media-query($medium-up) {
    font-size: em(50); /*Here I changed 60 to 50 (new text size on desktop view)*/
    .hero-wrapper--adapt & {
      margin-bottom: $gutter-slideshow;
    }
  }
}

5. Click save and check your preview.

6. That's it. If it worked, do the same on your primary theme!. Note that you can play with the numbers "30" and "50" to find the best combo that fits your needs.

Hope this helps!

jcp8723
New Member
2 0 0

@Find-Art-Co Just wanting to say THANK YOU very much mate. Your post is very helpful. Much appreciation. :)

0 Likes
Find-Art-Co
Excursionist
16 0 15
Your welcome. I am glad it helped you!
Treasurehunter
New Member
2 0 0

Hey mate!

 

Great questions and solutions! I needed this for my website skattejaegere.dk 

 

Thanks and good luck with your site!

0 Likes
Find-Art-Co
Excursionist
16 0 15

Thanks Sir, I'm happy to help.

0 Likes
MgNoOn307
New Member
1 0 0

I cant thank you guys enough for the one whos asking the one answring. 

 

you guys have just made my life easier. 

0 Likes
ColorConverge
New Member
1 0 0

@Find-Art-Co You are Legend my friend. Saved me so much time trying to learn how to do this! I owe you a beer.

0 Likes
JackieNeuburger
New Member
2 0 0

This was awesome! I was wondering though. I really want to change the size of the text box itself, not really the font. Is there a way to do that?

0 Likes