For my design project, I have crafted two unique modals that will pop up when their corresponding button is clicked. However, I have set it up so that each button is only visible on certain screen sizes using CSS @media query.
Now, I am looking to make a change where if the screen size is equal to or greater than 700px, the modal will automatically display when the page loads. If the screen is less than 700px, the alternative modal will be displayed without the need for clicking a button.
<div class="discountweb">
<button class="btn btn-default btn-sm" data-modal-url="/_process/ajax_fetch_modal_content?type=snippet&name=Popup Discount Web">
Discount Test Web
</button>
</div>
<div class="discountmob">
<button class="btn btn-default btn" data-modal-url="/_process/ajax_fetch_modal_content?type=snippet&name=Popup Discount Mobile">
Discount Test Mobile
</button>
</div>
<style>
@media only screen and (min-width:700px) {
.discountmob {
display: none;
}
}
@media only screen and (max-width: 699px) {
.discountmob {
display: block;
}
.discountweb {
display: none !important;
}
}
</style>
Your assistance with this matter would be greatly appreciated.