|
Jennifer Baca
|
June 9, 2014 at 5:10 pm
Hi,
I have the following text on my registration forms:
Add More Attendees? (click to toggle, limit 15)
When viewing on a mobile device this text is unreadable because it’s all squished together. On a desktop browser it’s all on one line but the text wraps to three lines and they all appear on top of each other.
Is there something I could put in the css file to fix this?
|
|
Lorenzo Orlando Caum
|
June 9, 2014 at 5:25 pm
Hello,
It looks like the padding is causing this. Try this CSS in your child theme’s stylsheet or a plugin like My Custom CSS:
.add-additional-attendee-lnk {
/* padding:1em 2em 1.25em; */
margin: 0 0 1em 0;
word-wrap: break-word;
background-color: #FFC;
border: #FC6 1px solid;
border-radius:3px;
color: #000;
text-shadow:1px 1px #fff;
cursor: pointer;
}
—
Lorenzo
|
|
Jennifer Baca
|
June 9, 2014 at 6:10 pm
It didn’t work Lorenzo. I installed my custom css and pasted it in, but no luck. I tried in the style.css file, too. Same thing. It still gets squished.
|
|
Lorenzo Orlando Caum
|
June 9, 2014 at 8:27 pm
Actually, could you try this instead:
.add-additional-attendee-lnk, .additional_header {
padding:0;
}
The style that I shared before will only work if you edit the original CSS.
—
Lorenzo
|
|
Jennifer Baca
|
June 10, 2014 at 12:30 pm
Lorenzo, I added that to my custom css, but still nothing. Maybe I can change the line height somewhere. Actually I’m going to try to add it to that media query. In any case, the media query isn’t working for me right now.
|
|
Josh
|
June 11, 2014 at 1:08 pm
Hi Jennifer,
display:inline-block; will work in this case:
#additional_header a{
display:inline-block;
}
example screenshot
|
|
Jennifer Baca
|
June 11, 2014 at 2:10 pm
You did it, Josh. That worked. Thanks!
|
