0

I have an owl carousel that loads with an automatic width which is determined by the screen size and items. The div .owl-stage has a width set on page load and resizes as the browser is resized. I got the width of the .owl-stage element and applies it to the element .block title which works fine.

$(document).ready(function() {
  $(".block-title").css({
    'width': ($(".owl-stage").width() + 'px')
  });
});

The issue is that .owl-carousel width changes but the .block-title stays set at the initial width that is set on page load. What needs to be added to the function so that .block-title width stays updated as the .owl-stage width changes?

Chris Oliver
  • 5
  • 8

1 Answers1

0

You'll likely have to change the font-size of .block-title class in order to "resize" it:

let fontSize = .9;
$(document).ready(function() {
  $(".block-title").css({
    'font-size': (`${fontSize}vw`)
  });
});

Adjust the fontSize variable to a decimal that makes it look right. Then it should scale to different browser-widths. Notice I'm using vw as the unit for font-size. For example a vw of 1, would be a pixel-font-size that is 1% of the viewport's width. Therefore, the font-size will adjust based on viewport width as the browser is resized.

Lonnie Best
  • 9,936
  • 10
  • 57
  • 97
  • What I am trying to do it keep it the same size as the element .owl-stage as that is resized. It gets the initial width of that successfully but then .owl-stage shrinks and the .block-title does not. – Chris Oliver Jan 27 '20 at 15:43
  • Still, try changing the decimal (above) until the size looks right. Then resize your browser to see if it stays looking right at different dimensions. If `owl-stage`'s width is proportional to the viewport width, then basing `.block-title`'s font-size on a decimal of viewport width should work; it is just a matter of modifying the decimal value of `fontSize` until it looks right. Then, it should scale (maintaining those proportions at different browser dimensions). – Lonnie Best Jan 27 '20 at 15:53
  • If you are resizing `.owl-stage` specifically, independent of the browser as a whole, then you will have to base `.block-title`'s font-size on `owl-stage`'s width, after each resize of `owl-stage`. – Lonnie Best Jan 27 '20 at 15:59
  • Take a look at some of the answers [here](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container). – Lonnie Best Jan 27 '20 at 16:05
  • The width of .owl-stage is defined by how many list items it contains initially so it can't be accurately calculated by the browser window. .owl-stage does resize as the window shrinks but the width is initially set based on the item number and not the resolution. – Chris Oliver Jan 27 '20 at 16:15
  • You can get the width of each element belonging to the `.owl-stage` class at [any point in time](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) (before or after items are added) and then use that value as a bases for determining that element's respective `.block-title` class-element's font-size. I hope someone answers with something easier, though. – Lonnie Best Jan 27 '20 at 16:33