Welcome, Guest
Username Password: Remember me

The preview is notthe same as my iphone
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: The preview is notthe same as my iphone

The preview is notthe same as my iphone 4 years, 12 months ago #19579

  • forteirp
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
  • Karma: 0
The Mobile Joomla preview layout looks great but when I use my iPhone and Android to see the layout it's not laying out the same way as the preview.... My Blackberry layout looks good too..... Does anyone know what is causing this issue?

Re: The preview is notthe same as my iphone 4 years, 12 months ago #19584

Hi forteirp.

Is this the URL of your Joomla site? hanksconstruction.net/ . I tried your site on my Mobile Asus Zenfone 2 Android and here's what it looks like:

Please see screenshot: screencast.com/t/3cE01NYDzusq

Can you also provide a screenshot from your iPhone or your Android phone? 

Best,

John Mark C.
Mobile Joomla! Support

Re: The preview is notthe same as my iphone 4 years, 12 months ago #19587

  • forteirp
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
  • Karma: 0
This is what I'm talking about, as you can see on your iphone the layout looks different then the preview Mobile Joomla does...... screencast.com/t/rZG6TrXs9m . Can you help me with this issue? It looks like the css or JS is not be call when I use the phone so its throwing off the layout.....

Re: The preview is notthe same as my iphone 4 years, 11 months ago #19598

  • forteirp
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
  • Karma: 0
We are still waiting for someone to get back to us about our issue....


-- the issue ---



The Mobile Joomla preview layout looks great but when I use my iPhone and Android to see the layout it's not laying out the same way as the preview.... My Blackberry layout looks good too..... Does anyone know what is causing this issue?


What it looks like on my Iphone: screencast.com/t/3cE01NYDzusq




and what it looks like using you guys preview: screencast.com/t/rZG6TrXs9m




as you can see on your Mobile Joomla! iphone layout looks different then the preview and we would like to fix this issue ASAP..
Last Edit: 4 years, 11 months ago by forteirp.

Re: The preview is notthe same as my iphone 4 years, 11 months ago #19605

  • dryabov
  • OFFLINE
  • Administrator
  • Denis Ryabov, Lead Developer
  • Posts: 4826
  • Karma: 105
1. Your template doesn't contain viewport meta tag, as a result different devices assume different default page width (usually 960px on iPhones) and scales page down. MJ's preview mode doesn't emulate this feature.
2. Your template is based on bootstrap, and rendering depends on screen width. E.g. logo in the header is wrapped into a <div> with class="span6" that is defined in bootstrap in the following way:
 
.span6 {
width: 300px;
}
@media (min-width: 768px) and (max-width: 979px) {
  .span6 {
    width: 372px;
  }
}
@media (min-width: 1200px) {
  .span6 {
    width: 540px;
  }
}
 

That is template is not responsive. It would be possible to replace all class="row" by class="row-fluid" to use responsive bootstrap styles, but it looks like template doesn't follow bootstrap layout rules, because not all of "row" children have "span*" classes, etc.

Anyway, start point should be to add
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 

to the template's <head> section.
  • Page:
  • 1
Time to create page: 0.28 seconds

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.

I accept cookies from this site.