What are the widths for the devices in the template / layout / Responsive Layout ?

The options are wide,normal,ztablet,tablet,mobile.

But what are the exact widths for each?

Hey Jeff,

It's based on the Bootstrap definitions for these devices:

getbootstrap.com/2.3.2/scaffolding.html#responsive

Cheers

Thanks!

For clarity have am trying to change the language of the responsive layout labels to reflect these dimensions.

I have edited this line in the t3 language file and made an language override but neither have changed the text.

T3_LAYOUT_DVI_WIDE ="Wide 1200px and up"




What am I missing to change this text?

I think the module position resizing should show calculated widths.

If I have a module with content styled to look best at a certain width, then I make sure to adjust that module position 4-5 times in the responsive layout settings so that it looks good on all widths. This typically takes a lot of trial and error when dragging.

Hi Jeff,

The language strings are related to admin so the overrides need to be placed in the admin folder.

Create /administrator/language/overrides/en-GB.override.ini and add the following

I'm not sure I follow about the calculated widths.
Do you mean that changing the the module widths in one layout should affect the module proportions in the other layouts?

Regards,

Rob

1. When I saw the language override stated "Site" i realized I was not doing it right. Thanks for the solution.



2. In regards to the module widths.

For example, if I have a line of text at a specified font-size, then I know that Top-1 has to be 200px in the Wide layout. Right now, I have to drag the Top-1 module position in the layout back and forth till it displays at 200px.

I also have a search module in Top-2, that also needs to be a min. width.

So for each Responsive Layout I have to guess on the width of Top-1 and Top-2 and then check it live to make sure the module widths are the minimum required for the content of the module.

If possible, it would be nice to see an actual number in px in each module position in the Layout. The number would change as I drag the module widths.

Hey Jeff,

The backend grid (as it was in Zen Grid) are really just relative values.

There are a couple of reasons for this:

1. Values will change according to the screen width.
2. The grid is percentage based so 6 cols will always be approx 50% (including gutters and padding).
3. Adding that calculation will probably cause a bit of a performance bump in the back end. On some servers and in some browsers T3 can be a little clunky as it is.

Hope that clears it up.

Anthony

That all makes sense.

Maybe I should be asking if I am doing it the way everyone else is with t3.

1. dragging the module positions in the responsive layout
2. checking it live to see if the module content looks good on all widths.
3. repeat 1&2 until all 5 layouts look right. And/or adjust with media queries.

Yes that sounds about right for me anyway

Cheers
Paul