Iphone '1 column layout'

16 posts from 6 voices

• Started 1 year ago by iamtherock03
• Latest reply from Devin
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   iamtherock03
   Member

   Congratulations on such a great wordpress theme.
   Before I bought this theme, I did a 'live preview' of the site on my iphone 4 and it displayed exactly as it does on my mac (eg 4 column portfolio layout). When I now view my live site on an iphone, it shows just one item at a time which looks clear but not as good as on a larger screen. Is there an option or a way to make my site view on a smartphone the same as a larger monitor? Or will it always default to the 1 column layout? Could you add something that gives this option? Some sites have a mobile version and a 'full' version. It would be nice to have that option for this theme.

   Thanks
   Chris

   Posted 1 year ago #
2. 

   timtoolman
   Member

   I think there's an option called "responsive" that you can turn on/off. Default is ON. I dont remember exactly in which screen, but shouldnt be hard to find.

   Responsive ON = site layout adjusts to device (resolution) being used. OFF = always show full site.

   Posted 1 year ago #
3. 

   iamtherock03
   Member

   Hi. Thanks for the advice but I've looked and can't find this option. Can you point me in the right direction? Or do I need to edit some code?

   Posted 1 year ago #
4. 

   iamtherock03
   Member

   Has anyone got any ideas how to help with this? I have found a few sites that optimise for iphone but also allow you to view the full site. That is exactly what I need. Help is really needed... and appreciated. :-) I can post links to the sites if that helps.

   Posted 1 year ago #
5. 

   Devin
   Moderator

   Hi iamtherock03,

   This option currently does not exist actually. The effect you are talking about is called Responsive design (it responds to the various screen sizes.

   In order to remove this, you'll need to open both grid.css and layout.css and search for then remove the @media queries and rules that go along with them.

   Regards,

   Devin

   Posted 1 year ago #
6. 

   iamtherock03
   Member

   Hi Devin.

   Thanks for the response.
   Not sure how to edit the css sheets yet as I'm still a novice but thanks for the reply.

   Would it be a feature that could potentially be included in this theme or maybe as a plugin?

   If you view this link http://fuse-design.co.uk/ on a large screen, it looks fab but if you view this on an iphone, it looks one column but at the bottom, there is a link to view full site. I think this has a lot of potential.

   Regards
   Chris

   Posted 1 year ago #
7. 

   Devin
   Moderator

   Hi iamtherock03,

   I sent the suggestion to Kriesi. Adaptive design is a love it or hate it subject it seems. From a UX standpoint, you always want the users to be able to navigate your site without trouble no matter the device. From a design standpoint, you want everyone to see the site as a whole no matter the viewport.

   Regards,

   Devin

   Posted 1 year ago #
8. 

   iamtherock03
   Member

   Hi.
   Thanks again. I found this on another support thread: DISABLE/REMOVE RESPONSIVE LAYOUT WITHIN PROPULSION THEME.
   Can I do the same for this theme? If so, I'll give that a try.

   Thanks for the great support.
   Chris

   Posted 1 year ago #
9. 

   Dude
   Dude

   Hey!

   Yes, Angular & Propulsion use the same css framework.

   Regards,
   Peter

   Posted 1 year ago #
10. 

    iamtherock03
    Member

    Hi again.

    Hope you can help as I'm 95% there but something isn't quite right.

    I'm basically wanting to remove the responsive layout from the Angular theme. I'm a novice so I've tried to follow the guide used in DISABLE/REMOVE RESPONSIVE LAYOUT WITHIN PROPULSION THEME. This involves editing the layout.css and grid.css files. Hope I'm right so far.

    So I've:

    1 - in layout.css file, remove between lines 2034 and 2099.
    2 - open the grid.css file and also remove all the media queries in there (line 57-180).
    3 - removing the media queries of layout.css should then seal the deal...

    This has created the view of a full website on a mobile device BUT it won't show all the screen. It shows a portion of the site which you can't scroll around. I can email you a screenshot if you supply an address but I can't leave the site as.

    Any advice is much appreciated.

    Thanks
    Chris

    Posted 1 year ago #
11. 

    sarwiya
    Member

    I did a 2 column portrait/ 3 column landscape modification for phones... though can be 3 columns portrait aswell but I don't think anything would be that legible. If you like the two column look, I can tell you the tweaks I did :-) Check my two column version: http://www.sarwiya.com/work

    Posted 1 year ago #
12. 

    oakland
    Member

    Hi Sarwiya

    I would like to know the tweaks you used. It looks good.

    Thanks

    Posted 1 year ago #
13. 

    sarwiya
    Member

    I added these lines to GRID.CSS

    added these in portrait:
    just below this: .container .twelve.units {width:300px;}

    #top .one_fifth,
    #top .one_fourth,
    #top .one_third,
    #top .two_fifth,
    #top .one_half,
    #top .three_fifth,
    #top .two_third,
    #top .three_fourth,
    #top .four_fifth { margin-left: 0; margin-bottom: 1px; width: 149px; }

    and these in landscape:
    just below this: .container .twelve.units {width:420px;}

    #top .one_fifth,
    #top .one_fourth,
    #top .one_third,
    #top .two_fifth,
    #top .one_half,
    #top .three_fifth,
    #top .two_third,
    #top .three_fourth,
    #top .four_fifth { width: 140px; margin-left: 0; margin-bottom: 1px; }

    also I reduced font size of the tittle etc aswell in the layout.css:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {

    /* my addition*/
    #top .portfolio-title{padding: 10px 6px;font-size:9px;}

    there were a lot of other tweaks... mostly cosmetic like margins below, padding, font size etc. Copy your main files first then do the tweaks and see if you are getting stuck anywhere :-) I hope this helps.

    These Angular mobile variants are best for font legibility, images , contact forms and everything looks sharp and snappy :-) Love this theme for this :-)

    Posted 1 year ago #
14. 

    Dude
    Dude

    Hey!

    Thanks for sharing your solution :)

    Best regards,
    Peter

    Posted 1 year ago #
15. 

    iamtherock03
    Member

    Hi

    Thanks a lot Sarwiya. The 2 column layout looks great.
    I've managed to remove the responsive layout altogether following the guide from the propulsion theme.
    I edited the grid css but forgot to remove one line of code in the header php. :-(

    All sorted now and I personally think it looks much better without the responsive theme but thats just me.

    Thanks for everyone's input. Its really appreciated.

    Chris

    Posted 1 year ago #
16. 

    Devin
    Moderator

    Glad its looking/working the way you want it :)

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.