Text box centering/ margin adjustment

There is a text box with a black background on the following page that contains an address that I have placed directly below the logo

In this address box there is extra black space after the last 9 in the zip code- the text is supposedly centered but there is no similar gap on the left side of the same text box, only on the right side of the text box- how do I eliminate this extra space? I have tried adjusting margins, centering, etc but nothing seems to work- is this extra black space caused by the letter spacing? How can I get rid of this extra black space? If I increase the letter spacing any more it does not swell to fill the extra black space, but rather bumps the zip code down to a new line

Also- if you look at the page in cornerstone you can see between the address text box and the lower scrolling ticker (handled by a raw content box) there is a decent sized gap- how can I control the size of this gap/eliminate the gap?

login attached in a secure note below

Thanks so much!

Hi there,

That is because of the letter-spacing added to the text that is on the black bar. Letter spacing would mean there is a space after every character that is why the first letter starts at the beginning of the block and the last letter has 21px space after it.

What you can do is add a negative margin to the span element that is in the black bar. It could be -21px since the letter-spacing added to the text block is 21.

Hello

Thank you for this. How do I go about adding the negative margin? What do you mean by span element?

Hi again,

Please update your code to this:

.responsive_text_1, .responsive_text_1 span {
    font-size: 1.9vw !important;
    letter-spacing: 1.4vw !important;
    margin-right: -1.4vw !important;
}

Let us know how this goes!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.