Changing the text size on the slideshow, venture theme

New Member
1 0 0

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/

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

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!

1 Like
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
Your welcome. I am glad it helped you!
0 Likes
New Member
1 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

Thanks Sir, I'm happy to help.

0 Likes