Crafty Home Page Headline Element

[hivehouse]

Why does the headline element overflow its column container when the base font size is set to 3.5em and the text font size set to 1em. This was unexpected behavior but could be very powerful for adding visual dynamics with overlapping section, without necessarily using the grid element. I’m just curious to understand better what’s going on with it.

If I reverse that and set the base font size to 1em and the text font size to 3.5em, it stays constrained in the column width.

Thanks

[lely]

Hi @wbgTHEMECO,

We’re sorry you are having this issue. The result of those 2 settings seems the same for me. Would you mind sharing a test URL showing 2 headlines with those settings and showing the overflow. We will inspect where the issue started.

Using Chrome developer tools, we can see how the font changes which one is applied to an element.

[hivehouse]

Actually, I’m more interested in what’s controlling the behavior that allows the headline to overflow the column it is in. This is the page that it currently is on https://demo.theme.co/crafty/

The headline text is “Start selling products with ease.”

I want to duplicate this “overflow” behavior. I thought it would be using the grid element, but it isn’t.

[jade]

Hello @wbgTHEMECO,

There is an element CSS involved to make the text overflow their container. Basically, it’s a combination of setting a min and max with to the headline and text element in the column.

Here is where you can find the Element CSS of the first section of the Crafty Demo:

Here’s the Element CSS involved:

@media (min-width: 767px) {
  $el {
    overflow: hidden;
  }
  
  $el .x-row-inner > .x-col:first-child {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  
  $el .x-text {
    min-width: 23em;
  }

  $el .x-text.x-text-headline {
    min-width: 9em;
  }
  
  $el .x-anchor-text-primary {
    white-space: nowrap;
  }

  $el > .x-row > .x-row-inner > .x-col .x-bg {
    width: calc(100% + 8rem);
  }
}

Hope this helps.