I need help with making my Ionic app responsive across all mobile devices. The design on the page was created using CSS, but it is not displaying properly on every device. How can I ensure that it adapts to different screen sizes?
<template>
<IonPage>
<ion-content :fullscreen="true" id="start" class="background">
<div id="product_background">
<Topbar />
<div class="container">
<ion-text color class="top-left">
<h1>ARTICS PRO</h1>
</ion-text>
<ion-text color class="heart_icon">
<ion-icon :icon="heartOutline"></ion-icon>
<ion-icon :icon="shareSocial"></ion-icon>
</ion-text>
<ion-text color class="top-left2">
<p>Steelseries</p>
</ion-text>
<ion-text color class="bottom-right">
<p>ARTICS 7</p>
</ion-text>
<ion-text color class="bottom-right2">
<p>Steelseries</p>
</ion-text>
<img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:100vw" />
</div>
<div slot="bottom" id="product_price">
<h2>$3,9000</h2>
</div>
</div>
<div id="product_info">
<p>Product Information</p>
</div>
<div id="cart_icon">
<ion-icon :icon="cart"></ion-icon>
</div>
</ion-content>
</IonPage>
</template>
<script lang="ts">
import { IonContent, IonPage, IonText,IonIcon } from "@ionic/vue";
import Topbar from "../Resources/Topbar.vue";
import { useRouter } from "vue-router";
import { heartOutline,shareSocial,cart } from 'ionicons/icons';
export default {
name: "Index",
components: { IonContent, IonPage, Topbar, IonText,IonIcon },
setup() {
return {
router: useRouter(),
heartOutline,shareSocial,cart
};
},
};
</script>
<style scoped>
ion-content.background {
--background: url("../../assets/product_background.png") 0 0/100% 93% no-repeat;
}
#product_background {
background-attachment: fixed;
background-size: cover;
padding: 20px;
}
#product_price {
position: absolute;
bottom: 60px;
}
.bottom-right {
position: absolute;
bottom: 14px;
right: 16px;
}
.bottom-right2 {
position: absolute;
bottom: 0px;
right: 16px;
}
#product_info{
position: absolute;
bottom: 60px;
left: 16px;
}
#cart_icon {
position: absolute;
bottom: 70px;
right: 50px;
}
#product_price{
position: absolute;
bottom: 150px;
left: 20px;
}
.container {
position: relative;
text-align: center;
color: white;
}
.heart_icon{
position: absolute;
top: 180px;
left: 8px;
}
.top-left {
position: absolute;
top: 16px;
left: 8px;
}
.top-left2 {
position: absolute;
top: 45px;
left: 6px;
}
</style>
It could be because I used HTML elements instead of Ionic components. What would be the equivalent replacement for HTML tags in Ionic?