Fit contact info in top bar on mobile

Hello!

I cannot get the contact info to fit in the top bar on my mobile?

Website is https://li-k9.com

Hello @briank9trainer1,

First thanks for using our theme!

Are you still having this issue? I checked your website now and the contact info looks correct to me, as you can see in the image below:

Perhaps you already resolved that issue?

Kind Regards,

Rodrigo.

aThemes Support

Hey rodrigo,

I was not able to figure that out. On mine it is still showing up like this:

Hello,

Thanks for the screenshot, now I am able to reproduce!

That’s because your device has a really small screen size. In this case we need break the contact info in two lines, for it please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media (max-width: 300px) {
	.top-bar-contact {
		flex-direction: column;
		justify-content: center;
	}
	.top-bar a {
		margin: 0;
	}
	.top-bar a + a {
		margin-top: 10px;
	}
    .top-bar-inner > .row {
    	justify-content: center;
    	text-align: center;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hey Rodrigo,

The contact info still displays the same on mobile. I cleared cashe, and cleared data from phone browser.

Hello @briank9trainer1,

That’s because it’s missing you close that media querie below (at Appearance > Customize > Additional CSS):

image

You need to close, like in the below image:

image

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

It looks the same. Not sure if I missed something?

Hello @briank9trainer1,

As checked it’s looking correct now. Probably that’s a caching issue.

OBS: Please add this additional CSS code to align it better to center.

.top-bar-inner > .row {
     margin-left: 10px;
}

Add the above code inside the @media (max-width: 300px) { .......... }.

We hope this helps!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Still the same. Im going to try rebooting my phone to see if that changes anything. Unless you have any other suggestions?

Hello @briank9trainer1,

Please try changing the media querie value from 300px to @media (max-width: 375px) { ......... }.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

YES!!! That did it. Thank you sir!!

Hello @briank9trainer1,

Great! You are welcome!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

aThemes Support