Opening hours and preventing line breaks

  • Resolved phirefly

    (@phirefly)


    8 years, 4 months ago

    Loving the plugin!

    Is there a method of preventing line breaks in the opening hours at small sizes as per image?

    Eg making the text smaller…or reducing the space between day and hour…or by using the shortened version of the day name (eg. Mon instead of Monday).

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Do you have a link to the opening hours on your site? I might have a couple ideas if I can see it in context.

    If you’re comfortable with templates, the plugin includes a template system you can override in your theme. This would allow you to do things like turn “Monday” into “M” which could help.

    Another thing to check is the time format of you overall WordPress settings (Settings > General). You can modify the time format across your site to show a shorter format which can help.

    Thread Starter phirefly

    (@phirefly)

    Thanks Nate – here’s the link: https://royston.staging.wpengine.com/ Ideally I’d prefer to keep the long name for the day (especially on desktop).

    Hi @phirefly,

    It looks like you’ve got it about as good as you can. There are just a few small ranges of window widths where the time doesn’t fit on a single line. A pure CSS solution would be to use media queries to target these windows and nudge the time onto it’s own line. A couple of the places I spotted would be:

    
@media(min-width: 480px and max-width: 520px) {
  .bp-time {
    display: block;
    width: 80% !important;
  }
}

@media(min-width: 980px and max-width: 1154px) {
  .bp-time {
    display: block;
    width: 80% !important;
  }
}
    • This reply was modified 8 years, 4 months ago by NateWr.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Opening hours and preventing line breaks’ is closed to new replies.