Ionic modal custom css

Ionic Native
1

I have created modal using the modal controller and I want to expand the width in larger screens such as desktops and laptops. I have to keep it same for the mobile devices

I have created this css class

.book-view-modal {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
}

the modal is

const modal = await this.modalController.create({
component: BookViewComponent,
componentProps: {
bookName: ‘dfdsfdsf’,
id: ‘dafsdfsd’
},
cssClass: ‘book-view-modal’
});
modal.present();

But still the size is not changed. Can somebody help

Thanks in advance.