Jump to content
Keith Vaugh

Font heights - Massive section

Recommended Posts

Keith Vaugh

Hi all

Is it possible to define two different maximum heights of fonts in the Massive section for two different lines (items)?

Is this possible (maybe with some CSS)? 

In the attached image - the black is what the Massive section is giving... The burgundy is the aesthetic I want to achieve (note the line lengths will also differ from page to page)

Screen Shot 2016-11-20 at 21.45.06.png

Edited by Keith Vaugh (see edit history)

Share this post


Link to post
Share on other sites
Keith Vaugh

Just bumping this threat to see if anyone has any input.

Share this post


Link to post
Share on other sites
Keith Vaugh

Had to take a few weeks away from the development, but am back at it. I was hoping that someone might have had a solution to this by now. Anyone able to offer some support here?

Share this post


Link to post
Share on other sites
Aires

Have you tried adding massive to a container and then controlling the width of the container in the settings.

Massive works by taking up the space that is available if you limit the space things should work as you like. 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks Aires. I was thinking about trying that, but then I need to do it twice on each page of the site. 

Ideally I need to create two lines of text, the main phrase, and a sub-phrase. If i could set a mix height for the these that would be the ideal solution. At the moment I am using a text box and us adding this:

<span class="impress">IMPRESS WITH SOMETHING BEAUTIFUL</span><br>
<span class="magvatag">Handcrafted letterpress stationery designed and printed in the heart of Ireland</span>
<hr class="soften">

in the CSS I have this defined:

.impress {
    font-family: "Champagne & Limousines", "Antic Slab", sans-serif;
    font-weight: 200;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 150%;
    color: #5d2248;
}

.magvatag {
    font-family: "Antic Slab", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
    line-height: 180%;
    color: #5d2248;
    opacity: 0.8;
    margin: 0;
	margin-bottom: 30px;
	margin-left: 5%;
	margin-right: 5%;
}

What the massive section allows for is these to resize for different screen sizes. The current solution I am using causes some text wrapping on mobile devices in particular....If I could a work around, it would be great...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×