0
Welcome Guest! Login
0 items Join Now

SOLVED :Responsive Gantry: desktop mode not used?

Last Post
Search Topic

  • SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • Hello all,

      I'm new to gantry and responsive, perhaps is a silly question but I don't see the media-query:
      @media only screen and (min-width: 960px) and (max-width: 1199px) {
}

      Activating when I resize the window in a mac 24" screen. I've a default gantry-responsive.css shipped with gantry 4.1.10 and doing the resize operation my template passed to use the:

      .rt-grid-12 {width: 1200px;}
      to
      @media only screen and (min-width: 768px) and (max-width: 959px) {
    .rt-container {width: 768px;}
    .rt-grid-1 {width: 64px;}
    .rt-grid-2 {width: 128px;}
    .rt-grid-3 {width: 192px;}
    .rt-grid-4 {width: 256px;}
    .rt-grid-5 {width: 320px;}
    .rt-grid-6 {width: 384px;}
    .rt-grid-7 {width: 448px;}
    .rt-grid-8 {width: 512px;}
    .rt-grid-9 {width: 576px;}
    .rt-grid-10 {width: 640px;}
    .rt-grid-11 {width: 704px;}
    .rt-grid-12 {width: 768px;}
 

      And the desktop mode is not activating. Why is that?

      Regards and thanks in advance.
    • Last Edit: 11 years 10 months ago by Pere Castanyer Sardà.
    #984536
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 217

    Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • @media only screen and (min-width: 768px) and (max-width: 959px) {
      .rt-container {width: 768px;}
      .rt-grid-1 {width: 64px;}
      .rt-grid-2 {width: 128px;}
      .rt-grid-3 {width: 192px;}
      .rt-grid-4 {width: 256px;}
      .rt-grid-5 {width: 320px;}
      .rt-grid-6 {width: 384px;}
      .rt-grid-7 {width: 448px;}
      .rt-grid-8 {width: 512px;}
      .rt-grid-9 {width: 576px;}
      .rt-grid-10 {width: 640px;}
      .rt-grid-11 {width: 704px;}
      .rt-grid-12 {width: 768px;}
      }

      You are missing the } marked in red.
    • Please reply with a direct link to the issue & create a new thread for each new issue.

      A template is only as good as the content that goes into it ;) - DanG
    #984542

  • Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • Nah,

      was a copy paste error in the post. On css seems all ok.

      Any other ideas?
      body {min-width: 100px !important;}
body [class*="rt-grid"] {display: inline;float: left;position: relative;margin: 0;}
 
.rt-container {width: 1200px;margin: 0 auto;position: relative;}
.rt-grid-1 {width: 100px;}
.rt-grid-2 {width: 200px;}
.rt-grid-3 {width: 300px;}
.rt-grid-4 {width: 400px;}
.rt-grid-5 {width: 500px;}
.rt-grid-6 {width: 600px;}
.rt-grid-7 {width: 700px;}
.rt-grid-8 {width: 800px;}
.rt-grid-9 {width: 900px;}
.rt-grid-10 {width: 1000px;}
.rt-grid-11 {width: 1100px;}
.rt-grid-12 {width: 1200px;}
 
.rt-push-1 {left: 100px;}
.rt-push-2 {left: 200px;}
.rt-push-3 {left: 300px;}
.rt-push-4 {left: 400px;}
.rt-push-5 {left: 500px;}
.rt-push-6 {left: 600px;}
.rt-push-7 {left: 700px;}
.rt-push-8 {left: 800px;}
.rt-push-9 {left: 900px;}
.rt-push-10 {left: 1000px;}
.rt-push-11 {left: 1100px;}
 
.rt-pull-1 {left: -100px;}
.rt-pull-2 {left: -200px;}
.rt-pull-3 {left: -300px;}
.rt-pull-4 {left: -400px;}
.rt-pull-5 {left: -500px;}
.rt-pull-6 {left: -600px;}
.rt-pull-7 {left: -700px;}
.rt-pull-8 {left: -800px;}
.rt-pull-9 {left: -900px;}
.rt-pull-10 {left: -1000px;}
.rt-pull-11 {left: -1100px;}
 
.rt-prefix-1 {padding-left: 100px;}
.rt-prefix-2 {padding-left: 200px;}
.rt-prefix-3 {padding-left: 300px;}
.rt-prefix-4 {padding-left: 400px;}
.rt-prefix-5 {padding-left: 500px;}
.rt-prefix-6 {padding-left: 600px;}
.rt-prefix-7 {padding-left: 700px;}
.rt-prefix-8 {padding-left: 800px;}
.rt-prefix-9 {padding-left: 900px;}
.rt-prefix-10 {padding-left: 1000px;}
.rt-prefix-11 {padding-left: 1100px;}
 
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .rt-container {width: 960px;}
    .rt-grid-1 {width: 80px;}
    .rt-grid-2 {width: 160px;}
    .rt-grid-3 {width: 240px;}
    .rt-grid-4 {width: 320px;}
    .rt-grid-5 {width: 400px;}
    .rt-grid-6 {width: 480px;}
    .rt-grid-7 {width: 560px;}
    .rt-grid-8 {width: 640px;}
    .rt-grid-9 {width: 720px;}
    .rt-grid-10 {width: 800px;}
    .rt-grid-11 {width: 880px;}
    .rt-grid-12 {width: 960px;}
 
    .rt-push-1 {left: 80px;}
    .rt-push-2 {left: 160px;}
    .rt-push-3 {left: 240px;}
    .rt-push-4 {left: 320px;}
    .rt-push-5 {left: 400px;}
    .rt-push-6 {left: 480px;}
    .rt-push-7 {left: 560px;}
    .rt-push-8 {left: 640px;}
    .rt-push-9 {left: 720px;}
    .rt-push-10 {left: 800px;}
    .rt-push-11 {left: 880px;}
 
    .rt-pull-1 {left: -80px;}
    .rt-pull-2 {left: -160px;}
    .rt-pull-3 {left: -240px;}
    .rt-pull-4 {left: -320px;}
    .rt-pull-5 {left: -400px;}
    .rt-pull-6 {left: -480px;}
    .rt-pull-7 {left: -560px;}
    .rt-pull-8 {left: -640px;}
    .rt-pull-9 {left: -720px;}
    .rt-pull-10 {left: -800px;}
    .rt-pull-11 {left: -880px;}
 
    .rt-prefix-1 {padding-left: 80px;}
    .rt-prefix-2 {padding-left: 160px;}
    .rt-prefix-3 {padding-left: 240px;}
    .rt-prefix-4 {padding-left: 320px;}
    .rt-prefix-5 {padding-left: 400px;}
    .rt-prefix-6 {padding-left: 480px;}
    .rt-prefix-7 {padding-left: 560px;}
    .rt-prefix-8 {padding-left: 640px;}
    .rt-prefix-9 {padding-left: 720px;}
    .rt-prefix-10 {padding-left: 800px;}
    .rt-prefix-11 {padding-left: 880px;}
}
 
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .rt-container {width: 768px;}
    .rt-grid-1 {width: 64px;}
    .rt-grid-2 {width: 128px;}
    .rt-grid-3 {width: 192px;}
    .rt-grid-4 {width: 256px;}
    .rt-grid-5 {width: 320px;}
    .rt-grid-6 {width: 384px;}
    .rt-grid-7 {width: 448px;}
    .rt-grid-8 {width: 512px;}
    .rt-grid-9 {width: 576px;}
    .rt-grid-10 {width: 640px;}
    .rt-grid-11 {width: 704px;}
    .rt-grid-12 {width: 768px;}
 
    .rt-push-1 {left: 64px;}
    .rt-push-2 {left: 128px;}
    .rt-push-3 {left: 192px;}
    .rt-push-4 {left: 256px;}
    .rt-push-5 {left: 320px;}
    .rt-push-6 {left: 384px;}
    .rt-push-7 {left: 448px;}
    .rt-push-8 {left: 512px;}
    .rt-push-9 {left: 576px;}
    .rt-push-10 {left: 640px;}
    .rt-push-11 {left: 704px;}
 
    .rt-pull-1 {left: -64px;}
    .rt-pull-2 {left: -128px;}
    .rt-pull-3 {left: -192px;}
    .rt-pull-4 {left: -256px;}
    .rt-pull-5 {left: -320px;}
    .rt-pull-6 {left: -384px;}
    .rt-pull-7 {left: -448px;}
    .rt-pull-8 {left: -512px;}
    .rt-pull-9 {left: -576px;}
    .rt-pull-10 {left: -640px;}
    .rt-pull-11 {left: -704px;}
 
    .rt-prefix-1 {padding-left: 64px;}
    .rt-prefix-2 {padding-left: 128px;}
    .rt-prefix-3 {padding-left: 192px;}
    .rt-prefix-4 {padding-left: 256px;}
    .rt-prefix-5 {padding-left: 320px;}
    .rt-prefix-6 {padding-left: 384px;}
    .rt-prefix-7 {padding-left: 448px;}
    .rt-prefix-8 {padding-left: 512px;}
    .rt-prefix-9 {padding-left: 576px;}
    .rt-prefix-10 {padding-left: 640px;}
    .rt-prefix-11 {padding-left: 704px;}
}
 
@media only screen and (min-width: 481px) and (max-width: 767px) {
    body {-webkit-tap-highlight-color: transparent;}
    .rt-container {width: 480px;}
    .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
    .rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
    .rt-container [class*="rt-prefix"] {padding-left: 0;}
}
 
@media only screen and (max-width: 480px) {
    body {-webkit-tap-highlight-color: transparent;}
    .rt-container {width: 95%;}
    .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
    .rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
    .rt-container [class*="rt-prefix"] {padding-left: 0;}
}
 
    #984554
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 217

    Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • Can you provide a link so i can take a look?
    • Please reply with a direct link to the issue & create a new thread for each new issue.

      A template is only as good as the content that goes into it ;) - DanG
    #984559

  • Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • It's a dev web in mamp pro local environtment....

      Wait, I'll try to put online somewhere. Give me some minuts.
    #984568

  • Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    #984577

  • Re: SOLVED :Responsive Gantry: desktop mode not used?

    Posted 11 years 10 months ago
    • Ok,

      It's solved. It's a little tricky to sail through diferent reolutions but now seems working.

      Anyway if someone have more info about mobile responsible css handling it would be nice.

      Regards
    #984756

Time to create page: 0.072 seconds