# Responsive LiveView

**URL:** <https://forum.elixirforum.com/t/responsive-liveview/36725>\
**Category:** Questions\
**Tags:** phoenix, liveview\
**Created:** [January 9, 2021, 6:32am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725 "2021-01-09T06:32:17Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![ouven](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ouven/32/20703_2.png) [@ouven](https://forum.elixirforum.com/u/ouven)\
**Post date:** [January 9, 2021, 6:34pm UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/9 "2021-01-09T18:34:17Z")

</div>

Works like a charm! I put the “breakpoints” into the frontend view\_helpers:

```elixir
  defp view_helpers() do
    quote do
      @sd_max_width 768
      @md_max_width 1080

      @display_size_small :display_size_small
      @display_size_medium :display_size_medium
      @display_size_large :display_size_large

      def display_size(width) when width <= @sd_max_width, do: @display_size_small
      def display_size(width) when width <= @md_max_width, do: @display_size_medium
      def display_size(width), do: @display_size_large

      use Phoenix.HTML
      ...
    end
  end

```

And dispatched the page\_size on in:

```elixir
 @impl Phoenix.LiveView
  def handle_event("viewport_resize", %{"width" => width}, socket) do
    socket
    |> assign(
      :page_size,
      case display_size(width) do
        @display_size_small -> 6
        _ -> 9
      end
    )
    |> noreply()
  end

```

Thanks to @cblavier and @sb8244 - solved by now 🙂

---

_[View the full topic](https://forum.elixirforum.com/t/responsive-liveview/36725)._