Header widget line and mobile breaks

I used this coding and css to add a header widget (found here, recommended by kriesi people), so the email and phone number would display next to the logo:

add_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}

#header .widget {
    left: auto;
    right: 10px;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-0%);
    z-index: 999999;
}

Using an HTML widget, I put the phone number and email on 2 lines, but there’s a HUGE gap between them, and it forces the second line down below the menu.

So I placed them on the same line with some spacing and it looks fine on a normal computer monitor, but it gets all messed up (moves over in front of the logo) on mobile screens.

I want to be able to have the phone and email on seperate lines, and I want them to move below the logo when the screen size is too small to display it properly.

• This topic was modified 6 years, 8 months ago by Synthea79.