Why my layout show up different on phone?

Hi

Why my layout does not show when open it in phone in the same format as I see it on the environment?

In environment:


On phone:




why there's no answer?

Maybe because it's Friday night and people are out or sleeping. I'm prioritizing new questions because the posters are probably still around, and others (if they are awake) probably think the same way. There are a few other questions from today still on hold.


The SS preview functionality has standard measures set. Your phone seems to have slightly narrow measures. With the Preview in Browser you can try several formats of phone/tablet.

Every time you used pixels instead of cols on design, you compromised its portability. If the layout is not responsive, it will look a bit deformed in different layouts.

Nuno Reis wrote:

Maybe because it's Friday night and people are out or sleeping. I'm prioritizing new questions because the posters are probably still around, and others (if they are awake) probably think the same way. There are a few other questions from today still on hold.


The SS preview functionality has standard measures set. Your phone seems to have slightly narrow measures. With the Preview in Browser you can try several formats of phone/tablet.

Every time you used pixels instead of cols on design, you compromised its portability. If the layout is not responsive, it will look a bit deformed in different layouts.

I have been using cols mostly, it was working fine but suddenly the layout deformed like that.

whats the best method to fix that?


Hi,

Are you using some placeholders set to automatic width? That can cause this as well when the data changes.

Could you please try "Restore To Default" in service center

Akshay Puri wrote:

Hi,

Are you using some placeholders set to automatic width? That can cause this as well when the data changes.

is there a way to make the pages fits all phones? I don't why but the page seems big and I can swipe up and down in it, I would like it to be static


Salman Ansari wrote:

Could you please try "Restore To Default" in service center

Tried this but no luck, I had to redesign it again to look better


Hi,

It has to do with the size of your screen, and the spaces you're giving. If you give fixed sizes, if the screen does not have that size in its sum, it will go down. So you should always try to build everything based on percentages. Or you can also use Flex from CSS.

Cheers

Faris Abdullah Almozini wrote:

Akshay Puri wrote:

Hi,

Are you using some placeholders set to automatic width? That can cause this as well when the data changes.

is there a way to make the pages fits all phones? I don't why but the page seems big and I can swipe up and down in it, I would like it to be static


Hi Faris if you want something static to fit all phones you need to get the smallest and design for it, this way will also fit the larges ones but not the best way to solve your problem.

what you should do is try to get the most used sizes and adapt the app to these ones using @media queries for the breakpoints for every design.

Check this articles to get to know more about the media queries and devices sizes:

https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

This one has a few sizes: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

https://www.w3schools.com/css/css_rwd_mediaqueries.asp


Hope I could help you

Best regards

Carlos Lessa