Changing the text size on the slideshow, venture theme

Highlighted
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/

Highlighted
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
Highlighted

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!

Highlighted
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
Highlighted
Your welcome. I am glad it helped you!
Highlighted
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
Highlighted

Thanks Sir, I'm happy to help.

0 Likes
Highlighted
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
Highlighted
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
Highlighted
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