Ozone Responsive Big Text for Ozone like in Citi Theme

[Tang 3]

Hi Nick,

I just started creating my Music Site with Ozone! It's gonna be fun.

 

Two questions:

 

1. Can You help me getting the Jumbo Headline Fonts responsive, exactly like in Citi Theme?

 

2. Unfortunately when shrinking or expanding browser window, the position of the headlines relative to backround moves. Could I pin that somehow? I put a big live on stage image of me as Background and don't want the headline text move over my head, when resizing.

[beardedavenger 158]

Hey Tang!

Sorry for the delay in my response.

 

1. Ozone is responsive. I dont' remember a "Jumbo Fonts" feature in Ozone.

2. It's using background-size: cover so it will always crop. You can try setting background-position with CSS to modify if as you need.

 

Nick

[Tang 3]

Nick, good to hear from you … no problem…  I know exactly how family and business live takes its time sometimes 

 

Sorry if I wasn't so precise with that. There is a <h1 class= "jumbo"> and I found out how to reposition the headlines in layer 1 changing margin %:

.ozone-content-first .ozone-section-inner-pad {
	margin: 15% auto 0;
}

And here I can adjust the font size for h1:

.ozone-content-first .ozone-section-inner-pad h1.jumbo {
font-size: 4em;
}

But when I increase size f.ex. 8em - for a cinema-display - how can I make the font resizing responsively to 4em on a smartphone display? I know it can be done, with some piece of code, but I'm not a pro - thats why I ask you, my friend. In City Theme you already made this happen.

 

Screenshot 01: This is what Ozone gives me by default with h1 4em:

 

http://www.screencast.com/t/zQMHJUEHa

 

Screenshot 02: … reducing browser window to almost smartphone gives me this - looks good:

 

http://www.screencast.com/t/TVCDf5cVxxWP

 

Screenshot 03: … but how nice would it look to have this big headline for a big screen … and then responsively resizing to screenshot 02:

 

http://www.screencast.com/t/bhMC5QZmtQ0

 

at the moment this is not possible. Thats why I ask for assistance.

 

And here is something else to look at:

Screenshot 04: Just wanted to show you what happens, when I reduce Browser-Window even smaller - suddenly the headline jumps in a higher position (no problem), but also layer 2 (about section) jumps up and covers the background (no good). I know this is another little problem I would love to be solved. Don't want this to happen on a smartphone. 

 

http://www.screencast.com/t/9FDnkIFNX8

 

Aloha - Tang

 

P.S. As alway I want to document my modifications and share them here, making good products like yours even more attractive to others. So lets put Ozone into a great artist site.

[Tang 3]

No answer to this, Nick? Maybe the resizing font problem could be solved with media-querys, - but if yes - it would be great to get a little help from the guru!

[beardedavenger 158]

Hey Tang,

Not quite sure what you're asking here. That text is resized dynamically from the script itself. 

[Tang 3]

Nick, are we both talking about Ozone?

 

I know Citi Theme  has that feature … and I'd like to implement that just for the headline-font in Ozone as well … that's the reason for this threat! I've not seen any text resizing yet. If I increase the h1.jumbo size from 4 to 8em:

.ozone-content-first .ozone-section-inner-pad h1.jumbo {
font-size: 8em;
}

it's looking nice on a big display, but that's how it will display on a smartphone:

 

http://www.screencast.com/t/IwuM9yjhWQch

 

there is no dynamic text resizing at all … sorry if i sound a little impatient … maybe I missed something her.

[beardedavenger 158]

Both of those themes basically use the same script, and the text itself is dynamically resized with the js itself.

[Tang 3]

If this is true, please check your own Ozone-Demo, put in a bigger font-size (8em like described above) for the header-font with Firebug or Chrome Dev Tool … and then resize the browser window down to smartphone-size. Does this really resize the font to a smaller size with you? In all my browsers nothing happens - it stays same size. In Citi-Theme this procedure works perfect! The corresponding element in Citi is called masthead-title.

[beardedavenger 158]

I am trying to explain to you, that both of those themes, use the SAME script, and the script is responsible for the resizing in the welcome content area. Without the script, you have to use media queries to change the size of the heading on mobile. I'm not quite sure how else I can put this.

 

The masthead section, if you change the size of the font, you'll need to take care of resizing it on mobile.

[Tang 3]

Great, if there is the same script for both themes, why doesn't it work in Ozone - at least in my tests? Even if I don't touch anything, leaving sizes to default, it definitly dos not resize over here. Cause the default »Ozone« is a pretty short title and with 4em it will of course fit into the smartphone display with out the need to be resized. So to test you must put in a longer Headline-Title. Over here this is simply cut off like in old non-responsive days. (just like in my last screenshot 4 answers before) 

 

I hope I don't step on your nerves with that. Maybe do we have a communication or understanding problem here, but I'm sure we solve it.

[beardedavenger 158]

http://www.screencast.com/t/IwuM9yjhWQch

 

You are responsible for resizing your own text, if you put the size to 8em. You can use a media query like

 

@media(max-width:420px){

.h1 {

  font-size:2em;

}

}

[Tang 3]

o.k. so that means, that the script, you were talking of, is not working in Ozone. True? But to be honest, this makes Ozone a partly-resposive theme. There are Headlines with more letters than just «Ozone« or »Tang« … and those are simply cut off in Smarphone Displays. I just made my headline longer to »TANGSMUSICWORLD« in an unmodified default version of Ozone (no Custom CSS) and this is the result for small screens:

 

http://screencast.com/t/uktE2VtMbSk3

 

Having an active script like in Citi is a fine and elegant way to resize and make the headline fonts responsive. Please include or activate this into Ozone and update your theme for your paying customers! In the meantime I'll try with Media Queries.

[beardedavenger 158]

I try to accomodate a wide range of uses with each product, however there are times where that's just not enough, at which point some additional things are needed (like CSS and media queries to fine tune things).

 

Nick

[Tang 3]

To finish this threat with a solution I want to share the media-query code I put in for making the welcome-headlines responsive with two breakpoints for normal display, tablets and smartphone sizes:

/* RESIZE HEADLINE FONTS (h1 and h3 in Welcome-Section ) */

.ozone-content-first .ozone-section-inner-pad h1.jumbo {
font-size: 8em;
}

@media (max-width: 1024px) {
.ozone-content-first .ozone-section-inner-pad h1.jumbo {
  font-size: 6em;
}
}

@media (max-width: 480px) {
.ozone-content-first .ozone-section-inner-pad h1.jumbo {
  font-size: 4em;
}
}

h3 small {
font-size: 2.5em;
}

@media (max-width: 1024px) {
h3 small {
  font-size: 1.9em;
}
}

@media (max-width: 480px) {
h3 small {
  font-size: 1.2em;
}
}

To see the final result, visit my website and resize browser-window to check.

 

http://www.tangsmusic.de

 

Aloha - Tang