0
Welcome Guest! Login
0 items Join Now

SOLVED How can I get the template working for 1920px ?

Last Post
Search Topic
    • Truman's Avatar
    • Truman
    • Rocketeer
    • Posts: 57
    • Thanks: 0

    SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Hi,

      I created a custom css, based on the suggestions from: www.rockettheme.com/forum/index.php?f=66...nsive&rb_v=viewtopic to get the responsive design working up to 1920 px.
      What happens is, that my content moves then to the left, so it seems to change something regarding the screen resolution, but the content part is not stretched to the full width of the screen. It stays at the standard width of the template, but at the left side of the screen.
      I am using the Oculus template and would really be happy, if somebody could post up the code for me, as I am not having any idea about programming.

      The file name, I created is: rt_oculus-custom.css

      The code, I put in, is:

      /* Responsive Layout Change to 1920 */
      @media only screen and (min-width: 1920) {
      div.rt-container {width: 1920px;}
      div.rt-grid-1 {width: 80px;}
      div.rt-grid-2 {width: 160px;}
      div.rt-grid-3 {width: 240px;}
      div.rt-grid-4 {width: 320px;}
      div.rt-grid-5 {width: 400px;}
      div.rt-grid-6 {width: 480px;}
      div.rt-grid-7 {width: 560px;}
      div.rt-grid-8 {width: 640px;}
      div.rt-grid-9 {width: 720px;}
      div.rt-grid-10 {width: 800px;}
      div.rt-grid-11 {width: 880px;}
      div.rt-grid-12 {width: 960px;}

      div.rt-push-1 {left: 80px;}
      div.rt-push-2 {left: 160px;}
      div.rt-push-3 {left: 240px;}
      div.rt-push-4 {left: 320px;}
      div.rt-push-5 {left: 400px;}
      div.rt-push-6 {left: 480px;}
      div.rt-push-7 {left: 560px;}
      div.rt-push-8 {left: 640px;}
      div.rt-push-9 {left: 720px;}
      div.rt-push-10 {left: 800px;}
      div.rt-push-11 {left: 880px;}

      div.rt-pull-1 {left: -80px;}
      div.rt-pull-2 {left: -160px;}
      div.rt-pull-3 {left: -240px;}
      div.rt-pull-4 {left: -320px;}
      div.rt-pull-5 {left: -400px;}
      div.rt-pull-6 {left: -480px;}
      div.rt-pull-7 {left: -560px;}
      div.rt-pull-8 {left: -640px;}
      div.rt-pull-9 {left: -720px;}
      div.rt-pull-10 {left: -800px;}
      div.rt-pull-11 {left: -880px;}

      div.rt-prefix-1 {padding-left: 80px;}
      div.rt-prefix-2 {padding-left: 160px;}
      div.rt-prefix-3 {padding-left: 240px;}
      div.rt-prefix-4 {padding-left: 320px;}
      div.rt-prefix-5 {padding-left: 400px;}
      div.rt-prefix-6 {padding-left: 480px;}
      div.rt-prefix-7 {padding-left: 560px;}
      div.rt-prefix-8 {padding-left: 640px;}
      div.rt-prefix-9 {padding-left: 720px;}
      div.rt-prefix-10 {padding-left: 800px;}
      div.rt-prefix-11 {padding-left: 880px;}
      }

      @media only screen and (min-width: 1600px) and (max-width: 1919px) {
      div.rt-container {width: 1600px;}
      div.rt-grid-1 {width: 80px;}
      div.rt-grid-2 {width: 160px;}
      div.rt-grid-3 {width: 240px;}
      div.rt-grid-4 {width: 320px;}
      div.rt-grid-5 {width: 400px;}
      div.rt-grid-6 {width: 480px;}
      div.rt-grid-7 {width: 560px;}
      div.rt-grid-8 {width: 640px;}
      div.rt-grid-9 {width: 720px;}
      div.rt-grid-10 {width: 800px;}
      div.rt-grid-11 {width: 880px;}
      div.rt-grid-12 {width: 960px;}

      div.rt-push-1 {left: 80px;}
      div.rt-push-2 {left: 160px;}
      div.rt-push-3 {left: 240px;}
      div.rt-push-4 {left: 320px;}
      div.rt-push-5 {left: 400px;}
      div.rt-push-6 {left: 480px;}
      div.rt-push-7 {left: 560px;}
      div.rt-push-8 {left: 640px;}
      div.rt-push-9 {left: 720px;}
      div.rt-push-10 {left: 800px;}
      div.rt-push-11 {left: 880px;}

      div.rt-pull-1 {left: -80px;}
      div.rt-pull-2 {left: -160px;}
      div.rt-pull-3 {left: -240px;}
      div.rt-pull-4 {left: -320px;}
      div.rt-pull-5 {left: -400px;}
      div.rt-pull-6 {left: -480px;}
      div.rt-pull-7 {left: -560px;}
      div.rt-pull-8 {left: -640px;}
      div.rt-pull-9 {left: -720px;}
      div.rt-pull-10 {left: -800px;}
      div.rt-pull-11 {left: -880px;}

      div.rt-prefix-1 {padding-left: 80px;}
      div.rt-prefix-2 {padding-left: 160px;}
      div.rt-prefix-3 {padding-left: 240px;}
      div.rt-prefix-4 {padding-left: 320px;}
      div.rt-prefix-5 {padding-left: 400px;}
      div.rt-prefix-6 {padding-left: 480px;}
      div.rt-prefix-7 {padding-left: 560px;}
      div.rt-prefix-8 {padding-left: 640px;}
      div.rt-prefix-9 {padding-left: 720px;}
      div.rt-prefix-10 {padding-left: 800px;}
      div.rt-prefix-11 {padding-left: 880px;}
      }

      My joomla version is: 2.5.11

      Thanks in advance for your help,

      Christian
    #994709
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • 1. on you first min-width you have missed off px
      2. you need to alter all the values for the gird sizes too. Gantry has 12 columns therefore, for example grid-1 should be 160px = 1920/12 = 160px

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #994760
    • Truman's Avatar
    • Truman
    • Rocketeer
    • Posts: 57
    • Thanks: 0

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Hey Mark,

      thank you for clarifying this. I will change this and try to get it working.

      What about the prefix, push and pull settings ? Do I have to adjust there also something ?

      Thanks a lot,

      Christian
    #994762
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Yes you do.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #994802
    • Truman's Avatar
    • Truman
    • Rocketeer
    • Posts: 57
    • Thanks: 0

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Any rule for changing the prefix, push and pull settings ?

      Thanks,

      Christian
    • Last Edit: 10 years 9 months ago by Truman.
    #994842
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Exactly the same rule... Number = number of columns = multiples of 160px (in the example your trying to create).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #994847
    • Truman's Avatar
    • Truman
    • Rocketeer
    • Posts: 57
    • Thanks: 0

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Ok, I am now using this settings:

      /* Responsive Layout Change to 1920 */
      @media only screen and (min-width: 1920px) {
      div.rt-container {width: 1920px;}
      div.rt-grid-1 {width: 160px;}
      div.rt-grid-2 {width: 320px;}
      div.rt-grid-3 {width: 480px;}
      div.rt-grid-4 {width: 640px;}
      div.rt-grid-5 {width: 800px;}
      div.rt-grid-6 {width: 960px;}
      div.rt-grid-7 {width: 1120px;}
      div.rt-grid-8 {width: 1280px;}
      div.rt-grid-9 {width: 1440px;}
      div.rt-grid-10 {width: 1600px;}
      div.rt-grid-11 {width: 1760px;}
      div.rt-grid-12 {width: 1920px;}

      div.rt-push-1 {left: 160px;}
      div.rt-push-2 {left: 320px;}
      div.rt-push-3 {left: 480px;}
      div.rt-push-4 {left: 640px;}
      div.rt-push-5 {left: 800px;}
      div.rt-push-6 {left: 960px;}
      div.rt-push-7 {left: 1120px;}
      div.rt-push-8 {left: 1280px;}
      div.rt-push-9 {left: 1440px;}
      div.rt-push-10 {left: 1600px;}
      div.rt-push-11 {left: 1760px;}

      div.rt-pull-1 {left: -160px;}
      div.rt-pull-2 {left: -320px;}
      div.rt-pull-3 {left: -480px;}
      div.rt-pull-4 {left: -640px;}
      div.rt-pull-5 {left: -800px;}
      div.rt-pull-6 {left: -960px;}
      div.rt-pull-7 {left: -1120px;}
      div.rt-pull-8 {left: -1280px;}
      div.rt-pull-9 {left: -1440px;}
      div.rt-pull-10 {left: -1600px;}
      div.rt-pull-11 {left: -1760px;}

      div.rt-prefix-1 {padding-left: 160px;}
      div.rt-prefix-2 {padding-left: 320px;}
      div.rt-prefix-3 {padding-left: 480px;}
      div.rt-prefix-4 {padding-left: 640px;}
      div.rt-prefix-5 {padding-left: 800px;}
      div.rt-prefix-6 {padding-left: 960px;}
      div.rt-prefix-7 {padding-left: 1120px;}
      div.rt-prefix-8 {padding-left: 1280px;}
      div.rt-prefix-9 {padding-left: 1440px;}
      div.rt-prefix-10 {padding-left: 1600px;}
      div.rt-prefix-11 {padding-left: 1760px;}
      }

      @media only screen and (min-width: 1680px) and (max-width: 1919px) {
      div.rt-container {width: 1680px;}
      div.rt-grid-1 {width: 140px;}
      div.rt-grid-2 {width: 280px;}
      div.rt-grid-3 {width: 420px;}
      div.rt-grid-4 {width: 560px;}
      div.rt-grid-5 {width: 700px;}
      div.rt-grid-6 {width: 840px;}
      div.rt-grid-7 {width: 980px;}
      div.rt-grid-8 {width: 1120px;}
      div.rt-grid-9 {width: 1260px;}
      div.rt-grid-10 {width: 1400px;}
      div.rt-grid-11 {width: 1540px;}
      div.rt-grid-12 {width: 1680px;}

      div.rt-push-1 {left: 140px;}
      div.rt-push-2 {left: 280px;}
      div.rt-push-3 {left: 420px;}
      div.rt-push-4 {left: 560px;}
      div.rt-push-5 {left: 700px;}
      div.rt-push-6 {left: 840px;}
      div.rt-push-7 {left: 980px;}
      div.rt-push-8 {left: 1120px;}
      div.rt-push-9 {left: 1260px;}
      div.rt-push-10 {left: 1400px;}
      div.rt-push-11 {left: 1540px;}

      div.rt-pull-1 {left: -140px;}
      div.rt-pull-2 {left: -280px;}
      div.rt-pull-3 {left: -420px;}
      div.rt-pull-4 {left: -560px;}
      div.rt-pull-5 {left: -700px;}
      div.rt-pull-6 {left: -840px;}
      div.rt-pull-7 {left: -980px;}
      div.rt-pull-8 {left: -1120px;}
      div.rt-pull-9 {left: -1260px;}
      div.rt-pull-10 {left: -1400px;}
      div.rt-pull-11 {left: -1540px;}

      div.rt-prefix-1 {padding-left: 140px;}
      div.rt-prefix-2 {padding-left: 280px;}
      div.rt-prefix-3 {padding-left: 420px;}
      div.rt-prefix-4 {padding-left: 560px;}
      div.rt-prefix-5 {padding-left: 700px;}
      div.rt-prefix-6 {padding-left: 840px;}
      div.rt-prefix-7 {padding-left: 980px;}
      div.rt-prefix-8 {padding-left: 1120px;}
      div.rt-prefix-9 {padding-left: 1260px;}
      div.rt-prefix-10 {padding-left: 1400px;}
      div.rt-prefix-11 {padding-left: 1540px;}
      }

      @media only screen and (min-width: 1368px) and (max-width: 1679px) {
      div.rt-container {width: 1368px;}
      div.rt-grid-1 {width: 114px;}
      div.rt-grid-2 {width: 228px;}
      div.rt-grid-3 {width: 342px;}
      div.rt-grid-4 {width: 456px;}
      div.rt-grid-5 {width: 570px;}
      div.rt-grid-6 {width: 684px;}
      div.rt-grid-7 {width: 798px;}
      div.rt-grid-8 {width: 912px;}
      div.rt-grid-9 {width: 1026px;}
      div.rt-grid-10 {width: 1140px;}
      div.rt-grid-11 {width: 1254px;}
      div.rt-grid-12 {width: 1368px;}

      div.rt-push-1 {left: 114px;}
      div.rt-push-2 {left: 228px;}
      div.rt-push-3 {left: 342px;}
      div.rt-push-4 {left: 456px;}
      div.rt-push-5 {left: 570px;}
      div.rt-push-6 {left: 684px;}
      div.rt-push-7 {left: 798px;}
      div.rt-push-8 {left: 912px;}
      div.rt-push-9 {left: 1026px;}
      div.rt-push-10 {left: 1140px;}
      div.rt-push-11 {left: 1254px;}

      div.rt-pull-1 {left: -114px;}
      div.rt-pull-2 {left: -228px;}
      div.rt-pull-3 {left: -342px;}
      div.rt-pull-4 {left: -456px;}
      div.rt-pull-5 {left: -570px;}
      div.rt-pull-6 {left: -684px;}
      div.rt-pull-7 {left: -798px;}
      div.rt-pull-8 {left: -912px;}
      div.rt-pull-9 {left: -1026px;}
      div.rt-pull-10 {left: -1140px;}
      div.rt-pull-11 {left: -1254px;}

      div.rt-prefix-1 {padding-left: 114px;}
      div.rt-prefix-2 {padding-left: 228px;}
      div.rt-prefix-3 {padding-left: 342px;}
      div.rt-prefix-4 {padding-left: 456px;}
      div.rt-prefix-5 {padding-left: 570px;}
      div.rt-prefix-6 {padding-left: 684px;}
      div.rt-prefix-7 {padding-left: 798px;}
      div.rt-prefix-8 {padding-left: 912px;}
      div.rt-prefix-9 {padding-left: 1026px;}
      div.rt-prefix-10 {padding-left: 1140px;}
      div.rt-prefix-11 {padding-left: 1254px;}
      }

      @media only screen and (min-width: 1200px) and (max-width: 1367px) {
      div.rt-container {width: 1200px;}
      div.rt-grid-1 {width: 100px;}
      div.rt-grid-2 {width: 200px;}
      div.rt-grid-3 {width: 300px;}
      div.rt-grid-4 {width: 400px;}
      div.rt-grid-5 {width: 500px;}
      div.rt-grid-6 {width: 600px;}
      div.rt-grid-7 {width: 700px;}
      div.rt-grid-8 {width: 800px;}
      div.rt-grid-9 {width: 900px;}
      div.rt-grid-10 {width: 1000px;}
      div.rt-grid-11 {width: 1100px;}
      div.rt-grid-12 {width: 1200px;}

      div.rt-push-1 {left: 100px;}
      div.rt-push-2 {left: 200px;}
      div.rt-push-3 {left: 300px;}
      div.rt-push-4 {left: 400px;}
      div.rt-push-5 {left: 500px;}
      div.rt-push-6 {left: 600px;}
      div.rt-push-7 {left: 700px;}
      div.rt-push-8 {left: 800px;}
      div.rt-push-9 {left: 900px;}
      div.rt-push-10 {left: 1000px;}
      div.rt-push-11 {left: 1200px;}

      div.rt-pull-1 {left: -100px;}
      div.rt-pull-2 {left: -200px;}
      div.rt-pull-3 {left: -300px;}
      div.rt-pull-4 {left: -400px;}
      div.rt-pull-5 {left: -500px;}
      div.rt-pull-6 {left: -600px;}
      div.rt-pull-7 {left: -700px;}
      div.rt-pull-8 {left: -800px;}
      div.rt-pull-9 {left: -900px;}
      div.rt-pull-10 {left: -1000px;}
      div.rt-pull-11 {left: -1100px;}

      div.rt-prefix-1 {padding-left: 100px;}
      div.rt-prefix-2 {padding-left: 200px;}
      div.rt-prefix-3 {padding-left: 300px;}
      div.rt-prefix-4 {padding-left: 400px;}
      div.rt-prefix-5 {padding-left: 500px;}
      div.rt-prefix-6 {padding-left: 600px;}
      div.rt-prefix-7 {padding-left: 700px;}
      div.rt-prefix-8 {padding-left: 800px;}
      div.rt-prefix-9 {padding-left: 900px;}
      div.rt-prefix-10 {padding-left: 1000px;}
      div.rt-prefix-11 {padding-left: 1100px;}
      }

      On my Macbook with 1920 screen resolution, it looks now better, but in the content area (main body), the box background box is not wide enough. It seems, that a few pixels are missing. Any thoughts on this ?

      You can check this on my website: www.offroaddance.com

      Thanks in advance,

      Christian
    #994853
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Well, I can see a few of your modules need " nomarginall nopaddingall" module class suffix on them to remove the padding and margin around them... I can also see that the background image to the mainbody needs to be increased in size from 1200px wide the 1920px wide (i.e. ../images/overlays/mainbody-dark.png);

      I would also point out that not many of your site visitors are going to have a screen of that resolution - also even if they do it is unlikely that they will get that resolution in the browser (since the browser itself is like to utilise a few pixels at either side of the window).

      The values you have set above now appear to be correct but there will be other things you will have to change to get everything looking correct at this resolution (e.g. images, image overlays, etc etc).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #994937
    • Truman's Avatar
    • Truman
    • Rocketeer
    • Posts: 57
    • Thanks: 0

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • Hi Mark,

      thanks for the informations. I will try to change the things, if I am able to get it done.

      What is the max. resolution, the Gantry 4 engine is supporting ?
    #995084
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How can I get the template working for 1920px ?

    Posted 10 years 9 months ago
    • There is no theoretical limit... but we only offer up to 1200px out of the box - we did this because it ensures that you will reach the widest audience with your site and also means you don't have to deal with a myriad of responsive sizes when creating your website. Responsive content development is difficult enough without adding extra sizes (as you have done). Also, getting all that working across all browsers is even more difficult.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #995087

Time to create page: 0.058 seconds