Solution 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

Problem :

In my jquery Mobile app, I’ve got a page that has a header and footer and the main content is 4 images arranged 2×2. I chose to create my own 2×2 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.

Comments

Comment posted by Raptor

Suggested to use Bootstrap framework.

Comment posted by MDN

In theory the answer is fine, but it contains some minor basic mistakes: e.g.

Comment posted by Mamdlv

@Raptor Got it, I adjusted it a bit. I was unaware that MDN is preferred over W3Schools, why is this? Thanks.

Comment posted by dwburger

OK…thanks for the suggestions and follow-up discussion. I’ve not used @media queries before so I guess I’m going to learn something new.

Comment posted by this thread

@Mamdlv mainly because MDN is up-to-date and accurate. See

By