Fix Mobile View for Portal
I just logged into my personal Donation/Fund Portal using my Google Pixel 8 and it does not look good. Many of the fields are overlapping and cannot be read properly. Please update/modify for responsive use, it's not built taking this into consideration.
Tiffany Caron
shared this idea
3/7/2025:Portal: Updated the default Portal template by adding mobile responsiveness through CSS. This update ensures a better and more optimized viewing experience for users accessing the Portal on mobile devices, improving the overall online presentation and usability.
-
Sally Weldon
commented
still testing but Jared, your fix seemed to have set the fields and text in place - appreciate you sharing! We can all see where the support for CSS issues in the new portal will come from - our peers!
Another idea for the portal that foundant may be able to address would be to have the login on a phone be easier, when I use my email address in the login field, it takes on what it thinks I want to type so sssss+1@xoy.com becomes Sss 1. It's like it autotypes the AI for what you type. This doesn't happen on the browser option to log in.
-
Jared Mabrey
commented
This CSS to paste into the Portal header might help.
<style>
/*--- Fix Mobile View of Portal ---*/
@media (width < 767px) {
.col-10, .col-8 {
width: 100%;
}.col-4 {
width: 100% !important;
margin: 14px 0;
}.col-3 {
width: 50%;
}.ft_left_nav.col-2 {
width: 90%;
}.portal .ft_left_nav {
border-right: none;
}.dt-container .dt-layout-row {
overflow: scroll !important;
}.goog-te-gadget {
display:none;
}}
/*--- Fix fund selector button ---*/
input.form-control.select-input.placeholder-active.active {
background-color: #fff !important;
font-size: 17px;
border: none;
}.form-outline {
border: 2px solid #f6955e;
--mdb-form-outline-select-notch-border-color: #f6955e;
border-radius: var(--bs-border-radius);
}
}.select-wrapper {
width: 100%;
}
</style> -
Madeline Bennett
commented
We are experiencing the same issue with the portal only. Giving hub looks nice on mobile. Any insight would be greatly appreciated!!!
-
Alan Delbridge
commented
Just discovered this as we are updating our portal agree with everything @tori below as stated.
-
Tori Calvert
commented
Every single user would vote for this if they noticed it and knew it would be solved by posting in Idea Lab. I chatted with support about this a couple months ago and was shocked that the answer was "post it in Idea Lab." The old/existing portal is mobile-friendly, and it will be a downgrade if we have to implement a new portal on April 1 that is not mobile-friendly.
-
Julie
commented
After seeing this post I checked the new fund portal (which we have on our Sandbox but not Live yet) on my iPhone and saw the same thing. Overlapping text and clunky layout. PLEASE make the layout of the new portal functional for mobile before we roll out the new fund portal to our live site.
