Welcome! To use this support forum, please Login or Join Today!

   

avery child theme styling questions

{name}
Rank

Total Posts: 3

Joined 2017-02-20

PM

 

Hi I’m trying to customize Avery,

Is there a visual list/index of what all the fonts included look like?

Also, I’m using the Hero text to go over an animation, what’s the css hook to get it to display flush left?


Thanx!

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi,

The fonts included with Avery are Google Web fonts.
https://fonts.google.com/

The way to preview each one is by going to Appearance → Customize and selecting the font from the dropdown.
Your content will update to reflect your selection. Any changes you make aren’t public until you click “Save”.
https://cl.ly/0m2R0R0E2O18

To left-align the hero text, add the following CSS override:

    .hero .equalized {
      text-align: left !important;
    }

or if you just want to do it for a specific page, look at the body class and adjust accordingly. For example, to only left-align the hero text on the home page:

    body.home .hero .equalized {
      text-align: left !important;
    }
{name}
Rank

Total Posts: 3

Joined 2017-02-20

PM

 

Thanks for the help.

Can I get the hero text closer to flush left?
Here’s my CSS for it so far:


/*! — hero banner style —— */

.hero .equalized {
    text-align: left !important;
font-family: ‘Alfa Slab One’, cursive;
}

.hero .text_white h1 {
font-family: ‘Alfa Slab One’, cursive;
font-size: 25px
}

.hero .text_white p {
font-family: ‘Rubik’, sans-serif;
font-size: 18px
}

Attachments:

https://www.filepicker.io/api/file/6BuSWO3GSaulsQjocyLs