#Vijaykrishnan

1 messages · Page 1 of 1 (latest)

slender gazelleBOT
empty obsidian
#

Yeah, can you share the code?

haughty python
#

sure

#

this is how i am seeing in mobile

image.png
empty obsidian
#

Can you elaborate a bit? What are you seeing? What are you expecting to see?

haughty python
#

this is a mobile view

#

i am using PaymentElement directly

#

it should be responsive to my viewport - but it is stretched

#

i dont have any additional css tagged

empty obsidian
#

What OS version is that?

haughty python
#

android v13

#

one ui version 5.1

empty obsidian
#

Grabbing a colleague who's a better mobile dev. Will circle back in a few

haughty python
#

ok

high basin
#

are you sure you don't have the "Desktop site" toggle turned on in Chrome by accident perhaps?

can you share a link to that ngrok site so I can try out the page myself?

haughty python
high basin
#

if you remove the forced-width in your CSS it looks fine.

main {
width: 480px
}

haughty python
#

ok lemme try

#

perfect it worked

image.png
#

thank you

high basin
#

great!. you're forcing the width to 480px but the screen on your phone is not 480 wide; to be responsive you would never do things that way. Maybe you wanted to set the max-width property instead of the actual width, you should read through resources like https://web.dev/responsive-web-design-basics/

When developing a mobile site with a meta viewport tag, it's easy to accidentally create page content that doesn't quite fit within the specified viewport. For example, an image that is displayed at a width wider than the viewport can cause the viewport to scroll horizontally. You should adjust this content to fit within the width of the viewport, so that the user does not need to scroll horizontally.

haughty python
#

thanks