Re-sizing <div> for iPhone and iPad screen - html

Question

In my jquery Mobile app, I've got a page that has a header and footer and the main content is 4 images arranged 2x2. I chose to create my own 2x2 grid in a div since I couldn't get JM grid to work. The code for the main content looks like this:
<div class="container">
<div class="image">
<a href="#intro">
<img src="img/Intro1.png" />
</a>
</div>
<div class="image">
<a href="#putting">
<img src="img/Putting1.png" />
</a>
</div>
<div class="image">
<a href="#chipping">
<img src="img/Chipping1.png" />
</a>
</div>
<div class="image">
<a href="#sand">
<img src="img/SandPlay1.png" />
</a>
</div>
</div>
The page css that arranges everything looks like this:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .image {
width: 50%;
}
.container img {
width: calc(100% - (5px * 2));
margin: 5px;
}
This works fine on an iPhone, but the images are too large on an iPad. On the iPad the images are the full width which makes them go beyond the bottom edge of the screen. I've looked all over for a solution to this and finally decided to come here. Thanks in advance for any help/guidance.

Answer 1

What you'll want to use is media queries. For the issue with the ipad you can set the media queries so that if your page is being viewed on a tablet/ipad size you can specify the size of the images and anything else. Take a look at this example:
.sample {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.sample {
font-size: 3.5rem;
margin: auto;
width: 50%;
padding-bottom: 100px;
}
}
In the above you can see the class of sample (both outside and inside the media query) has different css styles based on the screen size.
Take a look at this for further info: https://www.w3schools.com/css/css_rwd_mediaqueries.asp