Menu icon Foundation
website problem in Ipad

Hi
I have been working on client website where i am using media queries and joomla

here is the URL:
http://www.kersfield.co.uk/index.php/developments

The problem is when i see the website at my desktop or laptop its showing perfectly the with three images in ration 3x3 but when i see this page in i Pad, the page is mess up. The images showing in 2x2 ration instead of 3x3.
I have also use this css query for the Ipad but its not work.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

so please provide me the solution asap.
if you need any more information from me, kindly ask me

Looking forward your reply.

Thanks in advance.
Peeyush

ipadmedia query

Hi
I have been working on client website where i am using media queries and joomla

here is the URL:
http://www.kersfield.co.uk/index.php/developments

The problem is when i see the website at my desktop or laptop its showing perfectly the with three images in ration 3x3 but when i see this page in i Pad, the page is mess up. The images showing in 2x2 ration instead of 3x3.
I have also use this css query for the Ipad but its not work.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

so please provide me the solution asap.
if you need any more information from me, kindly ask me

Looking forward your reply.

Thanks in advance.
Peeyush

Peeyush Gupta over 5 years ago

thanks

Samuel Kelemen over 5 years ago

I would try adding class="small-4 column". This will make 3 columns on small viewports. I also notice if you resize the page, some of your images and text drop below their white box.

Peeyush Gupta over 5 years ago

thanks for your reply.

can you provide the code, where i have to put that code so ipad problem resolve.

I will manage the white box.

Samuel Kelemen over 5 years ago

The following HTML is an excerpt from the index.html included with the Foundation 5 Download.

 <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Foundation</h1>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
          <p>Once you've exhausted the fun in this document, you should check out:</p>
          <div class="row">
            <div class="large-4 medium-4 columns">
          <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
        </div>
            <div class="large-4 medium-4 columns">
              <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
            </div>
            <div class="large-4 medium-4 columns">
              <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
            </div>        
          </div>
        </div>
      </div>
    </div>

Notice the divs that have class="large-4 medium-4 columns"

In these classes, you can have a large size (Large-4), a medium size (medium-4), and a small size (small-4). These sizes are actually different grids that are used for different sized viewports (with mediaqueries ofcourse).

So, this allows you to have an element span a different number of columns on 3 different view size.

Small = mobile
medium = tablets
large = desktops

Sp if you want a half of the viewspace to be used on mobile, and only 1/3 used on desktop, you can use this:

<div class="Large-4 small-6 columns"> THIS IS A DIV </div>

Because you are using 4/12 columns in large, it will take up 1/3 of the width, and in small it will utilize 6/12 of the screen width, or 1/2.