asked on

Responsive Font Size

Hi Experts,

I have the following Code Pen - http://codepen.io/AleksPoposki/pen/WpZoaE?editors=1100

You will note that when you resize the width of the window, the logo resizes up to 210px - this is as expected.

How can I respectively resize the slogan's font size, so it occupies 100% of the logo's width?

For this, I also created #divIdentity, so it wraps both the logo and slogan, by taking the logo's width, but as soon as I un-comment CSS Lines 12-19 everything messes up, and the slogan still does not resize?

Another reason for #div Identity is because to the right of the header I'll need another element (hamburger menu), that's why I need this float.

I'm also OK using SASS, JS JQuery if needed,

Any help will be appreciated.

Leonidas Dosas

The solution that I suggest is this.I calculate a factor from a formula initial-logo-width(210)/slogan(16)=13 So with a function resize I am trying to keep this factor steady (Mathematics).With this formula i pass a variable to font size.Look at below...Tested in liveweave.

JQuery:

$( window ).resize(function() {
  var logoWidth=$('#imgLogo').width();
  if(logoWidth>=210){
    logoWidth=210;
  } 
  var sloganWidth=$('#divSlogan').css('font-size');
  slogan=parseInt(sloganWidth.slice(0,-2));
  var factor=13;
  $('#divSlogan').css('font-size',(logoWidth/factor));
 
});

Open in new window

APD Toronto

ASKER

Hi,

I agree with using a formla, but can you elaborate? How did you get slogan (16), and Lines 6-9?

Leonidas Dosas

Oopps sorry. Disregard the slogan and line 6-9.:

$( window ).resize(function() {
  var factor=13;
  var logoWidth=$('#imgLogo').width();
  if(logoWidth>=210){
    logoWidth=210;
  }
  $('#divSlogan').css('font-size',(logoWidth/factor));
 
});

Open in new window

APD Toronto

ASKER

I'm just wondering, how did you get a factor of 13?

logo width = 210, but what is slogan 16?

Can you explain the math, please?

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

APD Toronto

ASKER

Thanks again Leonidas!

[code]
//Script to Control Header
$(window).resize(function(){
//Proprtion Slogan's Font Size based on Initial Settings
var sloganFont = 10;
var divWidth = 210;
var div = $('#divSlogan');

var ratio = divWidth / sloganFont;
div.css('font-size', (div.width() / ratio) + 'pt') ;
})
[/code]