0
Welcome Guest! Login
0 items Join Now

Width of the buttons relative to the cell position

Last Post
Search Topic
    • MarioMari's Avatar
    • MarioMari
    • Elite Rocketeer
    • Posts: 513
    • Thanks: 0

    Width of the buttons relative to the cell position

    Posted 11 years 2 weeks ago
    • Is it possible to set width of buttons so that the percentages refer to the cell position in the gantry system grid?
      In view of the phone, when there is only one column, all looks good, but when there are more columns width on a wide screen buttons are not appropriate, and vice versa.

      Best regards!
    • Last Edit: 11 years 2 weeks ago by MarioMari.
    #1085734
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22268
    • Thanks: 3224
    • messin' with stuff

    Re: Width of the buttons relative to the cell position

    Posted 11 years 1 week ago
    • no... not really... but here's what I think you're after:


      you'd still use fixed widths but you break em at media queries like Gantry does...

      so in a 12 column layout you've got rt-grid-x classes that define the widths of the grid items, based on how many items are in a given postion/row.

      2 items, you have 2x rt-grid-6's (2*6=12)
      4 items, you have 4x rt-grid-3's (3*4=12)

      etc...

      so for a responsive layout, when minimum browser width is 1200px an rt-grid-6 will have a width of 600px since there's 2 of them... and rt-grid-3 will have a width of 300px, etc...

      when the minimum browser width is 960px those same rt-grid-6's drop down to 480px wide, the 3s down to 240px and rt-grid-2's for example would now be at 160px (960/6).

      So... you can scale content within these widths appropriately, but do it with fixed widths, not percentages...

      Say you had a 3 module block row... these module would be in rt-grid-4's... say you wanted 3 buttons within a single module to be edge to edge (impractical, you'll probably have padding, but lets keep the math simple for now) and scale responsively...

      at 1200px min browswers these rt-grid-4s would be 400px wide meaning you'd want your buttons to each be 133px wide... at 960px wide the rt-grid-4s would be 320px wide meaning your buttons would now need to be 110px wide...

      etc...

      Now, under 768px wide, rt-grid-[anything] jumps to a simple width:100%; So in your media query under 768 over 481 you do you math based on 768... under 480 you do your math as you see fit... you could do it to 480 but I prefer to do my math at 320px "max width" because that's what an iPhone is... ;)

      setting up your css:

      www.rockettheme.com/blog/team/57-respons...gn-rockettheme-part2 
      @media (min-width: 1200px) { 
.rt-grid-4 .button-class {width:133px;}
}
@media (min-width: 960px) and (max-width: 1199px) {
.rt-grid-4 .button-class {width:110px;}
}
@media (min-width: 768px) and (max-width: 959px) { ... }
@media (min-width: 481px) and (max-width: 767px) { ... }
@media (max-width: 480px) { ... }

      :)
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1088342

Time to create page: 0.040 seconds