Hi guys! I have done a portfolio website using com...

# compose-web

[Sergio Moral]

Hi guys! I have done a portfolio website using compose but I have a question about how it will be rendered in a mobile browser. I have implemented a UI that it’s cool for desktop but it breaks in a mobile. Do you create different uis for android,iOS and the web or how do you manage it? Thanks in advance!

[Chrimaeon]

Just create a responsive design. How will your app look on a tablet or on a foldable as a native Android and iOS app?

There is window size classes that help you adjust your layout.
https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes

[François]

https://www.jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-170.html#material3-material3-window-size-class

[Chrimaeon]

Also worth reading
https://www.browserstack.com/guide/how-to-implement-mobile-first-design

[Sergio Moral]

Thanks guys! I will definitely take a look at these :)

[Alex Styl]

@Sergio Moral if you need something compose related i wrote about the strategies I use in compose for responsive layouts a while ago: https://composables.com/jetpack-compose-tutorials/responsive-layout

[Sergio Moral]

Thanks @Alex Styl !!

[darkmoon_uk]

Check out my own portfolio and resize it in a Desktop Browser, maybe it'll give you some ideas for responsiveness: http://chrishatton.org
Source code linked at bottom of page.

[Sergio Moral]

Hi @darkmoon_uk !! Thanks a lot, i will take a look to get some ideas 😋. Cool site by the way and the chatbot is a really good idea!!

[Chrimaeon]

FYI @darkmoon_uk site does not load on iOS Safari. Only showing the loading spinner for 2 mins now

[Chrimaeon]

Oh, it changed now from dark theme to light theme loading. 4 mins and counting ;-)

[Stefano Milani]

For web, compose wasm, I use a custom object like this: object ScreenSize {
private val _width = MutableStateFlow(window.innerWidth)
val width = _width.asStateFlow()

init {
window.onresize = {
_width.value = window.innerWidth
}
}
} then I use this inside the composables: val screenWidth by ScreenSize.width.collectAsState(), then is very useful the developer option in chrome browser, check how to run multiple screen dimensions!

[Sergio Moral]

Sounds nice! I will add to my website! Thanks a lot!! :)