Jump to content
Sign in to follow this  
Tang

Responsive Big Text for Ozone like in Citi Theme

Recommended Posts

Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
Tang    3
Tang

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!

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Hey Tang,

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


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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;

}

}


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Tang    3
Tang

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

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

Sign in to follow this  

  • Similar Content

    • kinglou75
      By kinglou75
      I need to override the settings in the Flyte form area. I downloaded ninja forms and even sprung for the style extension. But every time I try to change the color of the fields and text it defaults to that dark gray. How would I go about fixing that?
    • beardedavenger
      By beardedavenger
      I've updated Ozone for DMS. It is however, NOT compatible with V2. So, if you're on V2, DO NOT UPDATE the theme. If you updated by accent, PM me your email and I'll email you the v2 files to get you back up and running. It came down to a few options here, and I think you'll find that I went with the best option.
       
      1. Build a new theme, screwing all of you out of what you purchased. Bad mojo.
      2. Bloat the theme with compatibility stuff, perhaps slowing it down, and adding unnecessary kruft for pure DMS users.
      3. Update the theme, but won't work with V2. You get a brand new theme, for FREE!
       
      Anyways, just some info for you so if you're seeing this and wondering about Ozone for DMS thank god you're reading this before hand.
    • bkevitt
      By bkevitt
      The citi theme has several issues with ie8.  Most of them are fixed with by the IE compatibility script.  The one thing it breaks however is the font awesome icons.  The icons actually appear for a second or so when the page is loaded and then are replaced by what appear to be unicode strings like f09a.
    • chamainew
      By chamainew
      Hi,
      I can't figure out why my blog articles are showing up when I click on portfolio with the citi theme.
      I have tried adding the gallery id to the theme but it's not working. I'm probably missing something very basic.
      the website is: woffard.com
      I will be grateful for any advice.
    • ochong88
      By ochong88
      I need to increase the size of the images in the Portfolio to 600 px across. 
      see example: http://dbmp.me.uk/wp/?attachment_id=867
      I have set the Media sizes as such. thank you for helping out Nick H.
      Width  Height 
       Crop thumbnail to exact dimensions (normally thumbnails are proportional) Medium size Medium sizeMax Width  Max Height  Large size Large sizeMax Width  Max Height   
×