1

I'm using the Unsemantic Grid to build a site. It works when I browse the site on my laptop, but doesn't work when I browse the site on my iPad - the grid elements behave like standard block elements and sit on separate lines.

I've started from a completely blank site to see if I can find the issue, but I'm obviously doing something wrong - it still doesn't work on iPad.

Here's the source of the test page as it stands now (apologies for the code spew):

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

<!-- proper HTML title -->
<title>title</title>

<!--[if lt IE 9]>
<script src="js/unsemantic/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" />
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="styles/unsemantic/unsemantic-grid-responsive-tablet-no-ie7.css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="styles/unsemantic/ie.css" />
<![endif]-->

</head>

<body>

    <div class="grid-container">

    <div class="grid-100 mobile-grid-100">
            <h1 class="grid-100">Here's a heading</h1>
            <hr />
        </div>
        <div class="grid-25 mobile-grid-25">25% wide</div>
        <div class="grid-50 mobile-grid-50">50% wide</div>
        <div class="grid-25 mobile-grid-25">25% wide</div>

    </div>

</body>

</html>

style.css contains nothing that could stop this from working - I've removed the reference to it from the page but it makes no difference.

There is no css reset being used.

On my laptop, the page renders like this:

Page viewed on laptop
(source: digitalformula.net)

On my iPad, the page renders like this:

Page viewed on iPad
(source: digitalformula.net)

The Unsemantic demo and the demo provided with the source both work fine on desktop and iPad - that's what it's designed for.

I know this is something I'm missing but I'm having some sort of mental block and can't find what markup or CSS I've forgotten to specify that could be causing this.

I'm not sure what else to include in this question but if anyone can help, I'd very much appreciate it.

Thanks

Glorfindel
  • 21,988
  • 13
  • 81
  • 109

1 Answers1

2

This is now resolved. It seems that the problem is somewhere within the special Unsemantic.com stylesheet aimed at mobile, tablet and desktop.

To be more precise, I'm sure it does work, but not in the configuration I'm using for some reason.

The aim of this question was to get my website up and running and using the 'standard' responsive stylesheet provided with the Unsemantic grid has solved that problem. For that reason I'm marking this question as resolved.

All I had to do was upload to standard stylesheet and change this:

<link rel="stylesheet" href="css/unsemantic/unsemantic-grid-responsive-tablet-no-ie7.css" type="text/css" />

To this:

<link rel="stylesheet" href="css/unsemantic/unsemantic-grid-responsive.css" type="text/css" />

Thanks