cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Letish
Advocate I
Advocate I

Power Apps Portal Mobile Phone Scaling

Hi All,

 

I have put time into building a demo portal, but I need it to be able to be viewed from a mobile without scaling issuers. Can anyone give me a push in the right direction?

 

https://native-manchester.powerappsportals.com/

 

1 ACCEPTED SOLUTION

Accepted Solutions
Fubar
Solution Sage
Solution Sage

Just looked at the home page.  I avoid using the studio (at this stage) as I'm used to doing it from within the Portal Management App.  

At the end of the day any edits you make (add an Image etc) you will need to make sure the appropriate settings are set. 

 

The Portal is 'width' aware, in that there are a number of Media tags in the Bootstrap min file that are used by the portal to help define content widths etc at differnet screen sizes.  These can be overridden in your own CSS file (but don't edit the ones provided as some times the files provided get replaced and you may find your changes are not working as they in the old version of the CSS file).

View solution in original post

4 REPLIES 4
Fubar
Solution Sage
Solution Sage

Do not mix your units - the Logo's IMG tag has a percentage for width and a set pixel for height (this is why you get distortion of the image) - use either both as px or both as percentage.

 

There is potentially other stuff you could do, but I think the image is issue is what you are referring to.

 

  

Thanks for taking a look. The iFrame is also much bigger than the mobile screen so that would need fixing too.

 

When you say not to mix my size settings, do I have to go into the code to determine what they should be? I was using the studio and placing items but of there is something I need to change in the code of items I can do that to get the result I want

Fubar
Solution Sage
Solution Sage

Just looked at the home page.  I avoid using the studio (at this stage) as I'm used to doing it from within the Portal Management App.  

At the end of the day any edits you make (add an Image etc) you will need to make sure the appropriate settings are set. 

 

The Portal is 'width' aware, in that there are a number of Media tags in the Bootstrap min file that are used by the portal to help define content widths etc at differnet screen sizes.  These can be overridden in your own CSS file (but don't edit the ones provided as some times the files provided get replaced and you may find your changes are not working as they in the old version of the CSS file).

View solution in original post

As @Fubar  mentioned,  Please follow his instructions to fix the scaling issues especially not to touch the inbuilt media queries. 

 

As you are aware currently portal is using Bootstrap 3. Upgrading to Bootstrap 4 will fix scaling but it is not recommended unless you are aware of places that need experts' hands.   

 

The best way to fix it at this stage is to upload a custom CSS and write generic media queries for your images, forms and frames. 

 

Below is the starting point article for your reference from @OOlashyn : 

 

https://www.dancingwithcrm.com/tricky-responsive-entity-form/ 

 

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Users online (53,768)