buttons in mobile
Homepage › Community Forums › Legacy Theme Support › buttons in mobile
Tagged: buttons in mobile
- This topic has 5 replies, 2 voices, and was last updated 11 years ago by
Wes.
-
AuthorPosts
-
April 22, 2013 at 4:09 am #4080
Hello,
I have been incorporating Buttons into the site. When the Button has a long Title, the text folds down one line. So I thought I might be able to adjust ‘padding’ to allow the Title area to expand inside the Button. Didn’t have much luck. Been working on this css code area: a.button {
On the Mobile site, When the Text folds, the color of the 2nd line is different…a little lighter shade. For example, Black becomes Grey. Anyway, you can see 3 examples on the OnLine Training Page
If I can’t change the button size, can I adjust the color…it’s not critical, but I’d like to adjust it if possible.
Thanx,
Tom
April 22, 2013 at 12:57 pm #4096I’m not sure what you mean by “text folds down one line“.
Yes you can change the size and the color, it just depends which one you want to customize.
April 22, 2013 at 8:43 pm #4114Hi Wes,
“text folds down one line” is my term for what I’m seeing as a difference of the appearance of the Button on my iMac when compared to the Mobile version.
Let me show you graphically:
iMac Button & Text: Coaching Program fees & faq’s – all the text is on one line
Mobile Button & Text: Coaching Program fees &
——————————————faq’s –the text drops down to a 2nd line and centered in the Button.
In the Mobile version, 2 of the 3 Buttons have text forced down to another line, and when the text is forced to the 2nd line, the background color of that line is different than the color of the 1st line of text above it. So,
As all 3 Buttons are almost identical in width, I thought I could adjust the padding inside the Button to allow more text inside the button. That would remove the need for a Button with 2 text lines and it would eliminate the color difference between line #1 & line #2. On the other hand,
If I can’t adjust the Button to accept more text without creating 2 lines of text in Mobile…that’s OK too. In that case, I’d like to color correct the backgrounds of the 2 lines so they are the same color. So what I’m wondering: is either of those adjustments possible?
here’s the Page: http://tomjdolan.com/online-training-2/
Thanx Wes,
Tom
ps/ this is an edit: I couldn’t show you in this text box the correct positioning of the word faq’s because this program reconfigured my spacing, so I added the ——- to give you an idea of how it’s rendering on Mobile.
April 23, 2013 at 12:46 am #4120Ok I see it now….
There is a gradient see through/transparent image that is on top of the button’s background color, which is what gives it the gradient look. You could just remove this image when a mobile phone is detected by adding this to your iPhone responsive section –
`a.button.medium {
background-image: none;
}`That will remove that gradient and it will be a solid color instead. There isn’t much you could do about the text running over if you have a long title, but I’m sure you already knew that. Let me know if that works.
April 23, 2013 at 2:17 am #4123Hi Wes,
It did work….but I didn’t like it as much as your original style. So, I removed a word, the title shortened, it looks fine, it’s not a 2-line button and I’m fine with it. Thanx for your help.
Tom
April 23, 2013 at 10:52 pm #4142You’re Welcome
-
AuthorPosts
- The topic ‘buttons in mobile’ is closed to new replies.