How to make a responsive PYNECONE WEBSITE

Question

I made a website with pynecone(pure python) that fits only my desktop. How can i make it responsive. Please share a small code with example

Answer 1

This is pynecone responsive layout.
From this official document, you can understand
how to make a responsive layout for your website.
https://pynecone.app/docs/styling/responsive

The default responsive layout considers 5 kinds of width.
Many things will be changed in these 5 different width sizes.

I make some sample code here.
If you modify the code from this sample and observe what thing is changed.
It is good for understanding quickly.
Watch this video to see the responsive layout ->
https://youtu.be/jL_rYm2qhfg

And the source code is in the following.

from pcconfig import config
import pynecone as pc

class State(pc.State):
    pass

def get_helloworld():
    return pc.center(
        pc.vstack(
            pc.text(
                "Hello World Text 1",
                display=["none", "none", "none", "none", "flex"],
            ),
            pc.text(
                "Hello World Text 2",
                display=["none", "none", "none", "flex", "flex"],
            ),
            pc.text(
                "Hello World Text 3",
                display=["none", "none", "flex", "flex", "flex"],
            ),
            pc.text(
                "Hello World Text 4",
                color=["blue","red",  "green", "yellow", "purple"],
                display=["none", "flex", "flex", "flex", "flex"],
            ),
            pc.text(
                "Hello World Text 5",
                display=["flex", "flex", "flex", "flex", "flex"],
            ),
            bg_color=["yellow","orange", "red", "blue", "green"],
            width=["sm","md","lg","xl","2xl"],
        )        
    )

def index() -> pc.Component:
    return pc.vstack(
        pc.desktop_only(
            pc.heading("Desktop View"),
            get_helloworld()
        ),
        pc.tablet_only(
            pc.heading("Tablet View"),
            get_helloworld()
        ),
        pc.mobile_only(
            pc.heading("Mobile View"),
            get_helloworld()
        ),
        pc.mobile_and_tablet(
            pc.heading("Visible on Mobile and Tablet"),
            get_helloworld()
        ),
        pc.tablet_and_desktop(
            pc.heading("Visible on Desktop and Tablet"),
            get_helloworld()
        ),
    )   
app = pc.App(state=State)
app.add_page(index)
app.compile()

Answer 2

I read https://pynecone.app/docs/styling/responsive
and make the small code.

from pcconfig import config
import pynecone as pc
class State(pc.State):
    pass

def index() -> pc.Component:
    return pc.vstack(
        pc.desktop_only(
            pc.text("Desktop View"),
        ),
        pc.tablet_only(
            pc.text("Tablet View"),
        ),
        pc.mobile_only(
            pc.text("Mobile View"),
        ),
        pc.mobile_and_tablet(
            pc.text("Visible on Mobile and Tablet"),
        ),
        pc.tablet_and_desktop(
            pc.text("Visible on Desktop and Tablet"),
        ),
    )
app = pc.App(state=State)
app.add_page(index)
app.compile()