philippagreen Posted October 1, 2015 Share Posted October 1, 2015 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? Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 1, 2015 Share Posted October 1, 2015 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. Quote Link to comment Share on other sites More sharing options...
philippagreen Posted October 1, 2015 Author Share Posted October 1, 2015 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) Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 1, 2015 Share Posted October 1, 2015 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"> Quote Link to comment Share on other sites More sharing options...
philippagreen Posted October 1, 2015 Author Share Posted October 1, 2015 Thank you so very much Quote Link to comment Share on other sites More sharing options...
philippagreen Posted October 2, 2015 Author Share Posted October 2, 2015 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 2, 2015 Share Posted October 2, 2015 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.) Quote Link to comment Share on other sites More sharing options...
philippagreen Posted October 2, 2015 Author Share Posted October 2, 2015 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 2, 2015 Share Posted October 2, 2015 In foundation.css, at the bottom, add:.main-logo img { width: 100%; } Quote Link to comment Share on other sites More sharing options...
philippagreen Posted October 2, 2015 Author Share Posted October 2, 2015 (edited) Fantastic!! Thank you SO much :-D Edited October 2, 2015 by philippagreen Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.