Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 1, 2022 at 9:29 pm #1342775
    bearrockconcrete

    1. I need to get the second phone number in the .phone-info section in the top bar on my website to show up on a second line on mobile devices only.

    2. i have multiple html spaces between phone #1 and phone #2 purposely to leave a little space between both phone numbers for the desktop only site. So I don’t want the spaces needed on the desktop site to mess up how the phone numbers look after a line break is inserted on mobile.

    I have found 2 possible solutions online for how to accomplish a mobile only line break:

    1. https://almostinevitable.com/css-responsive-line-breaks/

    and

    2. the following code:
    in html
    <br class=”mobile-break”>
    and in CSS
    @media screen and (min-width: 600px) {
    .mobile-break { display: none; }
    }

    both ideas add the break but the break shows up on desktop site too.

    do you all have any ideas about how to accomplish this?

    Idea number 1 is still active on my site.

    March 2, 2022 at 3:02 am #1342788
    Ismael

    Hey bearrockconcrete,

    Thank you for the inquiry.

    Looks like you have replaced the html with a span tag. To hide the span element on desktop view and only move the second phone number to the next line, use this css code.

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .desktop-br {
    display: none;
  }
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.