Improper Header Display on Mobile Device

  • My website is working fine on a desktop display, however, on a mobile device the one row of the header (with four columns) shows the columns stacked over top of other text instead of in one row. I have tried many of the solutions suggested to other people with similar problems but nothing has worked.

    I am using Divi 4.21.0. I am a volunteer trying to help as nonprofit and not an experienced WordPress user.

    The page I need help with: [log in to see the link]

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

  • Add this to your custom CSS

    .et_pb_row_0_tb_header {
    flex-wrap: nowrap;
}

    This changes the way the 4 columns in your header wrap.

    To find out more on why this works and search for CSS Flexbox.

    For more questions on your commercial theme it is best to use the Elegant Themes forum: https://www.elegantthemes.com/forum/, or reach out to their support, there should be a link in your admin menu under the Divi section.

    Thread Starter drbking

    (@drbking)

    Thank you. I found that with that code, it eliminates one of the column items that was displaying over top of other text. But also adding

    .et_pb_row_1_tb_header { flex-wrap: nowrap; }

    I eliminates all of them and puts them back in the header. It still doesn’t look great, but at least it’s out of the way now.

    I will post in the other Forum as you suggested. Thank you for your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Improper Header Display on Mobile Device’ is closed to new replies.