Image with text overlay: Code to modify element sizes

Elements in this article:

1

Headline - Main heading font size

2

Description - Subtext font size

3

Button padding

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

1

Headline - Main heading font size

To modify the main heading font size for desktop and tablet, use this code:

/* -- code to modify banner heading font size for desktop and tablet -- */
@media screen and (min-width: $medium) {
 .template-index .homepage-image h1.title--flex {font-size: 3em;}
}
/* to change font-size, adjust in increments example: change 3em; to: 3.1em; or 3.5em; or  smaller to 2.9em; or 2.5em; etc */
/* - end - */

Save the file.

Option to only make the first section title larger:

/* -- code to modify first banner heading font size for desktop and tablet -- */
@media screen and (min-width: $medium) {
.template-index .homepage-image:first-of-type h1{ font-size: 5em; }
}
/* to change font-size, adjust in increments example: change 5em; to: 6em; or 7em; or  smaller to 4em; or 3em; etc */
/* - end - */

To modify the main heading font size for mobile only, use this code:

/* -- code to modify banner heading font size on mobile only -- */
@media screen and (max-width: $small) {
 .template-index .homepage-image h1.title--flex {font-size: 1.2em;}
}
/* to change font-size, adjust in increments example: change 1.2em; to: 1.3em; or 1.4em; or  smaller to 1.1em; or 1.0em; etc */
/* - end - */

Save the file.

2

Description - Subtext font size

To modify the description font size, use this code:

/* -- code to modify banner description font size -- */
.template-index .homepage-image .content--flex {font-size: 2.0em;}
/* to change font-size, adjust in increments example: change 2.0em; to: 2.1em; or 2.2em; or  smaller to 1.9em; or 1.8em; etc */
/* - end - */

Save the file.

3

Button padding

To increase the button size, we can add some padding. Use this code:

/* -- code to increase button padding -- */
.template-index .homepage-image .btn--large { padding: 20px 50px; }
/* - end - */

Save the file.

The first number 20px is for top/bottom padding. The second number 50px is for left/right. You can adjust to your preference.

Still need help? Contact Us Contact Us