[Resolved] Web Site too wide on Mobile Devices

[philippagreen]

I used the Foundation skin for this web site:  http://www.houseofhorse.co.uk which my client is now filling up with stock.  It meets with Google's Mobile Device Friendly requirements, however if viewed on any mobile device in Landscape all is well, however in Portrait only half the web site is viewed.  Any ideas please how I can resolve the problem?

[bsmither]

I think there is more than one cause. For the first, compare:

You:
<div class="row marg-top" id="top_header">
  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE"></a> 
  <div class="small-4 large-3 columns">
  </div>
  <div class="small-8 large-9 columns nav-boxes">
    <div class="row" id="nav-actions">

Original:
<div class="row marg-top">
  <div class="small-5 medium-4 large-3 columns">
    <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
  </div>
  <div class="small-7 medium-8 large-9 columns nav-boxes">
    <div class="row" id="nav-actions">

The store's logo image is not inside a "columns" class <div> block. Thus, it will not scale to fit the device.

You probably did this to make the logo more prominent. I'll have a suggestion about this later.

There is a second cause I haven't found yet, but it will probably be similar.

[philippagreen]

Thank you - so basically I've messed things up by putting the store logo how I have, any suggestions please how I can have the store logo where is it but still have it scale to fit the device? (it's not just the heading that doesn't scale to fit, the whole width of the web site doesn't) fine on landscape just not on portrait (on any size device)

[bsmither]

I think I've found the other cause. It seems in foundation.css, line 126, a rule for .row has changed the width from 100% to 900px. A fixed width does not scale.

For the logo, you can try this:

<div class="row marg-top" id="top_header">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-12 columns">
  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE"></a>
      </div>
    </div>
  </div>
  <div class="small-4 large-3 columns">
  </div>
  <div class="small-8 large-9 columns nav-boxes">
    <div class="row" id="nav-actions">

 

[philippagreen]

Thank you so very much

[philippagreen]

Web Site working fine now on mobile devices, however I can't seem to be able to have the header image the full width of the web site, not ideal but if a comprise has to be made then it's a small one? Ever so grateful for all your advice :-D

[bsmither]

Seems good to me.

Can you offer a more detailed description of the effect you are trying to achieve?

The logo is 900px wide. It's important that it, as well as everything else, scale down to fit a smaller viewport, But the CSS is coded to not let the image go any bigger than the image's true size. (Might be able to change that, however.)

 

[philippagreen]

The client wanted the right edge of the horseshoes to be in line with the right edge of the web site, i.e. the navigational bar.  

[bsmither]

In foundation.css, at the bottom, add:

.main-logo img { width: 100%; }

[philippagreen]

Fantastic!! Thank you SO much :-D

Edited October 2, 2015 by philippagreen