prime blocks blocks are not reactive

[elliopitas]

for example lets take reactivityTest.vue file its is just copy pasted not modified at all.
I'm using Nuxt 3.0.0

Code: Select all

<template>
<div class="flex surface-section">
    <div class="w-12 sm:w-6 px-4 py-8 md:px-6 lg:px-8">
        <div class="border-left-2 border-pink-500">
            <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">404</span>
        </div>
        <div class="mt-6 mb-5 font-bold text-6xl text-900">Page Not Found</div>
        <p class="text-700 text-3xl mt-0 mb-6">Sorry, we couldn't find the page.</p>
        <div>
            <Button class="p-button-text mr-2" label="Go Back" icon="pi pi-arrow-left"></Button>
            <Button label="Go to Dashboard" icon="pi pi-home"></Button>
        </div>
    </div>
    <div class="w-6 hidden sm:block" style="background: url('/images/404.png') no-repeat; background-size: cover">
    </div>
</div>
</template>

<script setup lang="ts">
import Button from 'primevue/button';
</script>

looks like this

[tugce.kucukoglu]

It's completely about by design. You could modify the code as you wish.

[elliopitas]

yes that's not the problem i know I can do that its that in the demo on the prime blocks it is responsive and scales for phones like this


but it doesn't for me

[cagatay.civici]

What do you mean not reactive? There is no javascript in this block in terms of Vue reactivity.

[elliopitas]

What do you mean not reactive? There is no javascript in this block in terms of Vue reactivity.

sorry I meant responsive

[tugce.kucukoglu]

yes that's not the problem i know I can do that its that in the demo on the prime blocks it is responsive and scales for phones like this


but it doesn't for me

Actually, this block is responsive. You could see it from Chrome developer tools, it has .hidden.sm-block classes.

[Me_libra]

yes that's not the problem i know I can do that its that in the demo on the prime blocks it is responsive and scales for phones like this


but it doesn't for me

Actually, this block is responsive. You could see it from Chrome developer tools, it has .hidden.sm-block classes.

Oh ok, Thanks for the guide.
I was actually unaware of this.

[elliopitas]

i think its because sm doesn't work on my project for some reason correctly. for example if I do this

Code: Select all

<template>
<div class="sm:text-5xl">
    <TheNavbar/>
    <slot />
</div>
</template>

it still applies it when the browser is fullscreen on my monitor

[tugce.kucukoglu]

The screenshot could not help to understand the problem. You could check it from browser developer tools.

[elliopitas]

what do you want exactly from the developer tools?
As you can see here for example applies the small classes even when the window is clearly big.