Campaign Donation amount options hidden in mobile screens

  • SAVEnw
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 8 months ago #142699 by SAVEnw
In a previous form post, it was suggested to help display donation amount options correctly on a narrow screen, we should go to Joom Donation, Configuration, Custom CSS tab and copy paste the following:@media screen and (max-width: 480px) {    #donation-form .switch-amounts {      display: inline !important;    }}However the result is that the amount options are hidden on narrow screens. There is simply a blank box after “CHOOSE OR SELECT YOUR AMOUNT.”This problem occurs on the General Donation page and also on each of the specific campaign donation pages. Here is a link to a donation page showing this problem. savenw.org/news/coming-events/we-bowl-fo...ation-bowler-sign-up I have tried to analyze this problem with Firefox inspector. It shows the file controlling the appearance of this is com_joomdonation assets folder, css folder. style.css line 611. There is a media query and a line showing display none. However, I do not understand why it is set for display none.What custom CSS code should we use to display the donation amounts for custom campaigns on mobile phones?p { margin-bottom: 0.1in; line-height: 115%; background: transparent }a:link { color: #000080; so-language: zxx; text-decoration: underline }

Please Log in or Create an account to join the conversation.

More
3 years 8 months ago #142700 by Dave B
I used this CSS on my site:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#donation-form .switch-amounts {
    display: inline !important;
}
}

Changing the code to this at least got me started. But there is something else going on. See the other things off to the side?

#donation-form .switch-amounts {
    display: inline-block;



  • Please Log in or Create an account to join the conversation.

    • SAVEnw
    • Topic Author
    • Offline
    • New Member
    • New Member
    More
    3 years 8 months ago #142701 by SAVEnw
    Thanks for the suggestion. I added both CSS to the JoomDonation Configuration custom css tab. Unfortunately, at least in Firefox, the Donation Amounts still fail to appear. Hopefully, someone at JoomDonation can help us fix this problem.

    Please Log in or Create an account to join the conversation.

    More
    3 years 8 months ago #142705 by Mr. Dam
    Hi,
    I see you are having some problems on your Donation form, please submit ticket on category: Joom Donation and provide your site url with super admin account. I will check and help you to solve those problems.
    Thanks
    Dam

    Please Log in or Create an account to join the conversation.

    • SAVEnw
    • Topic Author
    • Offline
    • New Member
    • New Member
    More
    3 years 8 months ago #142754 by SAVEnw
    I have submitted a ticket and the problem was fixed. However, I also want the solution posted on this forum so that others can also fix this problem on their websites.

    Please Log in or Create an account to join the conversation.

    More
    3 years 8 months ago #142757 by Mr. Dam
    Hi,
    I enabled Bootstrap 2 loading and enable configure option: "Display amount textbox" to show Custom Donation Amount field in Donation form
    Thanks
    Dam

    Please Log in or Create an account to join the conversation.

    Moderators: Mr. DamDũng Nguyễn Việt