[TYPO3-english] Mobile Template for Framework for TemplaVoila

Ron Hall ronslists at busynoggin.com
Wed Sep 7 23:39:56 CEST 2011


Hello Kay and Andi,

What you are running into probably revolves around 2 things. The inline CSS in the columns and modules and the container / max image width sizes that are tracked and used through the entire rendering process.

First regarding the inline styles. Column widths and floats are currently hard-coded in the columns and modules. However, you can override those inline pixel based styles by using a CSS technique like this.

http://css-tricks.com/2708-override-inline-styles-with-css/

Does not work with IE6, but other than that can be used to target columns and modules and provide percentage values and change the floats.

That does not help you with resizing your images. If you are trying to create a responsive design that changes as you resize the browser window by using media queries than you will need to use probably a max-width of 100% on your images so they do not exceed your containers. You will still be downloading the full image but that will help it behave visually.

But if you want to change the rendering size of the images based on it being mobile or not then my guess is you can do as Kay suggested and use conditionals to change the width settings of the Framework.

I am conducting a major rewrite of the Framework code in order to give even more flexibility. Particularly I am working on how to handle responsive designs, make it easy to use common CSS frameworks with it (like 960.gs) and allow specifying new HTML5 tags like section and aside for many of the wraps.

Thanks,
Ron Hall


On Sep 6, 2011, at 8:24 AM, Kay Strobach wrote:

> Hi Andi?
> 
> Conditions?
> 
> Regards
> Kay
> 
> Am 06.09.2011 13:40, schrieb Andreas Becker:
>> Hi Ron
>> 
>> we are currently working on a mobile solution for the framework for
>> templavoila. One question came up now:
>> 
>> Would it be possible to have different width specific settings for
>> 
>> website 992
>> tablet 768
>> mobile horizontal 480
>> mobile vertical 320
>> 
>> for those module and column elements.
>> 
>> Everything is flipping and working fine beside the fact as as soon you are
>> using i.e. 50/50 elements it resizes complete wrong.
>> 33/33/33 is working perfect but 66/33 not as the 66 element does not get
>> resized to be a 33 element and the text should float to new lines.
>> 
>> Andi
> 
> 
> -- 
> http://www.kay-strobach.de - Open Source Rocks
> 
> TYPO3 .... inspiring people to share!
> Get involved: http://typo3.org
> 
> Answere was usefull: https://flattr.com/profile/kaystrobach
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
> 



More information about the TYPO3-english mailing list