Widget Business Hours seems not responsive

Ask the Community General Questions
1

Hi
What can I do to make the widget Business Hours responsive?

If that is not possible, Is there a way to abbreviate the names of the months? Like:
januari > jan
februari > feb
maart > mrt
april > apr
mei > mei
juni > jun
juli > jul
augustus > aug
september > sep
oktober > okt
november > nov
december > dec
Website: https://cremerieoostende.be/
Thank you
Lieve

2 Likes
3

Hi there, @user25252 :waving_hand:

Apologies for the inconvenience!

I’ve forwarded the issue with text cropping to the devs and will let you know once it’s fixed.

As for now, you can reduce the font size on mobile to fix the issue using this code in the Custom CSS field on the Style tab of your widget’s settings:

@media (max-width: 500px) {
[class*="typography__Container-sc"] {
  font-size: 13px;
}
}

Also, we’ve abbreviated months using this script in the Custom JS field on the Style tab:

const LANG = 'nl';

function shortenMonths(input, lang) {
  const monthRegex = /\d+\s([a-zA-Z]+)\s*-\s*\d+\s([a-zA-Z]+)/;
  const match = input.match(monthRegex);

  if (!match) {
    throw new Error('Invalid input format');
  }

  const [, month1, month2] = match;

  function getAbbreviatedMonth(monthName) {
    const date = new Date(
      Date.parse(`${monthName} 1, ${new Date().getFullYear()}`)
    );
    return new Intl.DateTimeFormat(lang, { month: 'short' }).format(date);
  }

  const shortMonth1 = getAbbreviatedMonth(month1);
  const shortMonth2 = getAbbreviatedMonth(month2);

  const result = input
    .replace(month1, shortMonth1)
    .replace(month2, shortMonth2);

  return result;
}

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

listener(
  '[class*="schedule-block__Container-sc"]:last-child [class*="schedule-block__ItemsContainer-sc"]',
  (container) => {
    setTimeout(() => {
      container
        .querySelectorAll('[class*="schedule-item__Title-sc"]')
        .forEach((node) => {
          node.textContent = shortenMonths(node.textContent, LANG);
        });
    }, 300);
  }
);

Please check it out and let me know if you like the result :slightly_smiling_face:

1 Like
4

Thank you, Max.

It is great!

Kind regards
Lieve

1 Like
5

It’s my pleasure :wink: