Header Contact Info Not Well Aligned in Mobile View

Hi team,

I have an issue with header contact as described in my topic title.

I have installed Elementor Pro, is that possible have caused this issue? I’ve disabled elementor plugin but the result still same. Please assist.

Regards,
Faris

Hi Faris,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .header-contact-info > span {
        display: block;
        text-align: center; 
      }
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for the help. After adding that particular code, its working well but I cannot publish/save the code. Got this error:

image

If possible I want to make all in one line, what’s the code should be inserted?

Hi,

Thank you for getting back.

Try this code:

    @media only screen and (max-width: 767px) {
    	 .header-contact-info .header-phone, 
       .header-contact-info .header-email, 
       .header-contact-info .header-address {
    		 display: block;
    		 text-align: center;
    	}
    }

If still, the error appears after adding that revised code, try inserting into the most top line to ensure yout other code contains an error or not.

Regards,
Kharis
aThemes Support

Hi Kharis,

its working well now. thanks for the help !

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support