I am building out a mobile site on my demo image and came across the following issue – The typical resolution of a smartphone screen is 320x480 – i.e width is 320px (Most new smartphones are similar) I have created a website with the 1700 template in 15.1.3, and stripped out as much functionality as possible to make it really easy to read on a mobile. However, the 1700 template will not decrease in size below 750px - which means, when I access on my phone, it scales it down in size, making all the fonts hard to read. I thought this template was meant to be scalable for mobile. Does anyone know what I need to do to get it to have a flexible width down to 320px?
Flexible width on 1700 template for mobile
Don't touch that
On February 4th, 2011 jhull-jurkovic says:
The above stylesheet is in the YUI folder, rather than the specific website folder - and effects all imis interfaces - changing min width on there makes all the fonts on the staff web portal tiny for some weird reason
Modify the mobile website's theme
On February 7th, 2011 jskillman says:
The file that you referenced in your earlier comment is used globally by all WCM websites. So you are correct that you do not want to modify it directly. However, you can still override the specific style(s) that are derived from the Yahoo User Interface (YUI) base CSS within the theme of your mobile website.
Based on the initial description you gave for creating your mobile website, I'm assuming that in Site Designer, under Manage Websites, you now have a website that is intended solely for use by mobile devices. This would mean that your site has each of the following assets in the ..\imis15\Net\ directory on the web server (where {mobilesite} is the name of your website):
- App_Themes\{mobilesite}\
- images\
- 00-Reset.css
- 01-MasterPage.css
- 10-Ultrawave.css
- 20-Template1700.css
- Ultrawave.skin
- {mobilesite}\
- various content files
- Templates\MasterPages\
- {mobilesite}.master
When ASI developed the the Ultrawave theme, the baseline style sheet names were preceded with numeric values so that organizations could insert their own style sheets to load in the appropriate order (by default, cascading style sheets load in ASCII order by name of the CSS file).
So rather than editing the YUI style sheet directly, you should simply add the selector and style declarations from your earlier comment into a new CSS file (e.g., named 30-{mobilesite}.css) and that style will override the YUI baseline styles.
Note that 20-Template1700.css is intended as a website-specific style sheet and would usually be renamed and modified in the field to match an organization's desired look and feel. So you could also put your overriding styles in that sheet instead of creating a new one.
found it
If you edit the reset-fonts-grids.css, you can alter the minimum doc width. Not sure why this has been set.
#doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7
{
margin: auto;
text-align: left;
width: 57.69em;
width: 56.301em;
min-width: 750px;
}