How can I decrease the font size on one slideshow specifically on my website?

Store Design

Topic summary

A user needs to reduce font sizes for a specific slideshow on a landing page while keeping other slideshows unchanged. The slideshow is located at jukescordialities.com/pages/france.

Solution Provided:

  • Custom CSS code targeting the specific slideshow ID was shared
  • Code adjusts both title and subtitle font sizes using !important declarations
  • Implementation requires editing the theme’s CSS file (base.css, style.css, or theme.css) through Shopify admin

Follow-up Requirements:

  • User needs the same font adjustments applied to all slides within that slideshow (not just the first slide)
  • Mobile version also requires smaller fonts with different sizes for titles and subtitles
  • User is seeking guidance on finding slide image IDs for additional slides

Status: Partially resolved. Desktop solution works for one slide, but implementation for remaining slides and mobile responsiveness is still being discussed.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am currently creating a landing page, and need to decrease the font size of one slideshow specifically.

I still want the rest of the slideshows on my website to keep the usual font size, but is it possible de have a smaller font just on one slideshow specifically?

2 Likes
2

Hi @jukescordialiti

Can i take a look, would you mind to share your store URL? And which slideshow you like to decrease the font size, it is the title or the subtitle? Thanks!

1 Like
3

Thank you for offering to help!

Here is the URL: https://jukescordialities.com/pages/france

And this is slideshow I am referring to:

jukescordialiti_0-1713343960064.png
jukescordialiti_0-1713343960064.png2810Ă—1098 257 KB

1 Like
4

Thanks! check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

/* title */
#Slideimage_rG79w9 > div.Slideshow__Content.Slideshow__Content--middleCenter h3.SectionHeader__SubHeading.Heading.u-h6 {
    font-size: 25px !important;
}
/* sub-title */
#Slideimage_rG79w9 > div.Slideshow__Content.Slideshow__Content--middleCenter h2.SectionHeader__Heading.Heading.u-h1 {
    font-size: 20px !important;
}

And Save.

Result:

Made4uoRibe_0-1713374191058.png
Made4uoRibe_0-1713374191058.png1170Ă—511 243 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Amazing that works.

How can I apply that the second slide that is in that slideshow? How can I find the slide image ID?

Thanks so much for your help on this

Maoré

6

And last question, how do I do the same on mobile version?

Thanks so much!

7

If my post helped you please dont forget to likes and mark solution.

For the 2nd slide it is different sizes of font? or same on the 1st one?

1 Like
8

On the mobile it is same size or different sizes? Please explain all not one by one. Thanks!

1 Like
9

Thank you.

On desktop: I need all slides on the same sideshow to have the same font size. Title and subtitle being of different size.

On the mobile version: I also need to have a smaller font on all slides on the same slideshow. Title and subtitle being of different size.

Let me know if anything is unclear?

10

You can decrease the font size on your website by coding or simply setting up it on your page.