I recently updated my modal to only work on screens smaller than tablets, which was successful. However, I now need it to also work on desktop size.
After trying to change d-none to d-block, it still didn't work.
Any suggestions?
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="assets/about/about1.jpg" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline d-xl-none"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles
</figcaption></a>
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="assets/about/about1.jpg" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles
</div>
</div>
</div>
</div>