Forum Discussion

Henrik's avatar
Henrik
Advisor
11 years ago

Different HTML structure for the same page, from mobile or desktop browser

Hi,

 

We are using customized page in our community that are not related to a community node. For instance, I created a "Presse" custom page. "/t5/custom/page/page-id/Presse" will lead to that page.

 

I have found out that, for those specific pages, my CSS doesn't apply the same way if I use a phone or another device (iPad, desktop browser). The reason is that the HTML structure is different if I get to that page with a phone. The mobile mode is disabled (we want to try responsive design).

 

With an iPad, Chrome, Safari, Firefox, IE, etc. I get this structure:

<body class="Presse lia-body" id="lia-body">
	<div class="lia-page">
		<center>
			<div class="MinimumWidthContainer">
				<div class="min-width-wrapper">
					<div class="min-width">
			    			<div class="lia-content">Custom Content</div>
					</div>
				</div>
			</div>
		</center>
	</div>
</body>

 

With a phone (iPhone or Android), I get this one:

<body class="Presse lia-body" id="lia-body">
	<div class="lia-page">
		<div class="lia-content">Custom content</div>
	</div>
</body>

 

Before I try to modify my CSS, would you know if it is possible to correct that behaviour?

 

Thanks!

 

Henrik

  • nathan's avatar
    nathan
    Executive
    11 years ago

    I'm not aware of any way to changing the outer-most page structure, although you can add code to the header etc.

     

    One tip that may help - if you have just one custom component for the whole page, and embed other components within it, you have full control of the HTML structure within the outer-most component.

    • Henrik's avatar
      Henrik
      Advisor
      11 years ago

      Hi Nathan,

       

      Thanks for the tip!

      Regarding the different structure, I've modified my CSS to match the HTML.

       

      Have a nice day,

      Henrik

  • Henrik's avatar
    Henrik
    Advisor
    11 years ago

    One more precision. The meta tag:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

    is also added in the header of those pages.

     

    It is as if the mobile mode was activated for those pages even if it is disabled in the administration section of the community.