Address Field Alignment

asked on May 4, 2023 • Show version history

I am trying to align the address field the total width to fields above it. I thought adjusting the width of the CSS OnePerLine would help, but it doesn't seem to do anything. I am a novice, so I'm sure it's something simple... any ideas?

/*Displays one fields per line*/
.OnePerLine{display: inline-block; width:100%;}
.OnePerLine .cf-medium {width:97%;}
.OnePerLine .cf-small {width:97%;}

/*Displays two fields per line*/
.TwoPerLine{display: inline-block; width:50%;}
.TwoPerLine .cf-medium {width:97%;}
.TwoPerLine .cf-small {width:97%;}

/* Displays three fields per line */
.ThreePerLine {display: inline-block; width:33%}
.ThreePerLine .cf-medium {width:97%;}
.ThreePerLine .cf-small {width:97%;}

0 0

SELECTED ANSWER

replied on May 4, 2023

Looking in the Browser Inspect ELements panel, I see this line with the cf-address and cf-fluid class names is set to 92% width.

So we just need to override that width to use up more than 92%. After some experimentation, I settled on 96% instead.

/*widen the address fields to match other field widths*/
.cf-address.cf-fluid {
    width: 96%!important;
}

Looks like this:

1 0

replied on May 4, 2023

Thank you! I experimented and had to bump up to 98% but it looks great. I really appreciate your expertise!

1 0

replied on May 4, 2023

You're very welcome.

0 0

Question

Question

Answer

Replies

Sign in to reply to this post.