On mobile only – struggling with centering top phone

[sandyms]

On the very top left, I would like both the tag line and the mobile phone to be centered on the left, with the quote button on the right.

It is only in the regular mobile view (the mobile landscape view is okay being left justified as it currently is.)

I would have thought this would be much easier, but I am struggling to get the phone part centered. The tag line above it, I did get this, but I had to add padding to the left and right so that the word wrapping looked nicer instead of only having one word end up wrapping.

So – I was able to get the tag line working by adding this to the custom.css:

@media (max-width: 480px) {
.text-tag-top-center {
text-align:center;
padding-left:26px;
padding-right:26px;
}

.text-phone-top-center {
text-align:center;
padding-left:26px;
padding-right:26px;
}

}

I am not using the phone one above as it doesnt work.

Please help and thank you!

---

Template Version: 13.0.0

[Support]

Hi, I’m not 100% sure I understand the question but please try this:

(css/custom.css)

@media (max-width: 991px) {
	#header > div > div.header-top.bg-topbar-light-tan > div > div > div.header-column.justify-content-start > div > ul {
		text-align: center;
	}
}

---

[sandyms]

I should clarify this first. When the responsive screen is mobile size, that is the only time I want the top left tagline and phone to be centered instead of left justified. Does that help?

---

[sandyms]

I did try what you sent but that did not work.

---

[sandyms]

PS – You can see that I have the top tag line working but not the phone below it. For some reason, I cant get that to center correctly.

---

[Support]

This reply has been marked as private.

[sandyms]

I does work!

I thought I would need to take out my custom.css to use yours instead. But I see that if I use my existing code and yours it is working perfectly.

Thank you so much!

---

[Author]

Posts