RWD, liquid layouts, text wrapping at smaller screen size

It seems like for anyone looking to break into web dev these days, the RWD is a must learn. In a perfect world the concept seems pretty simple: page-specific css, plus media queries. So, do I code based on a strict liquid layout, content/container=%. What about the block text inside, is that set to em or px? I currently have em's and my layout shrinks nicely but the text does not appear to shrink along w the smaller div.
I know liquid layouts can become hairy. Do open source frameworks like Bootstrap or Gumby provide the structure to overcome that, or is ensuring a smooth responsive design really more up to the developer and the effort put into troubleshooting anyways. The reason I ask is I currently can't afford to upgrade to cs6 from cs5. Thank you.

DW is just a tool. What matters most is the talent and effort you bring to the project.
In the following example, I used CSS Media Queries to set the body base font size in %.
Mobile = 75%, tablet = 100%, desktop = 135%.
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Similar Messages

Labels cut off smaller screen size

I created an installer for an application. But some other users don't have the same screen size as the PC I created this application on, and some labels and characters are cut off on their screens, particularly if the screen size is small. I'm sure a solution is there for this problem. Can you help

Hello,
I've looked a little deeper into this for you, and have found some new information. Please take a look at the following document:
http://digital.ni.com/public.nsf/allkb/048C31D73E8EC91286256E440063E1BB
Under the Scaling all Objects heading, there is a note that text labels do not resize along with other front panel objects, because they're fixed. With that being said, it is still possible to programmatically find the front panel's size by accessing your VI's Front Panel>>Panel Bounds property. Then, you can set the size of you text labels programmatically by setting their Font property using a Property Node.
I hope this helps.
Frank L.
Software Product Manager
National Instruments

Website Background not extending across screen in smaller screen sizes

Hello, Ive created a website that the background extends across the entire width of the screen regardless of size.
But Ive notice on some screen sizes, mostly the smaller ones, part of the background does not continue across.
It does not seem to matter which browser Im using.
The site is www.farleysjewelers.com
If anyone has any suggestion or can help me figure out why, that would be great.
Sincerely, Sam Barnhart

Sam: post this question in the dreamweaver forum.
http://forums.adobe.com/community/dreamweaver
G

Small screen size in FCE?

I only have this problem when I use footage that a co-worker FTP's to me. It doesn't happen when I capture from my camera. The actual video dimension is much smaller than it should be. It is surrounded by a black box (see screen shot). How do I get the actual video to fill the 400x300 screen.
Here is screen shot: http://s234.photobucket.com/albums/ee223/hkench/?action=view&current=screen_shot 2.jpg

FCE is a DV and HDV only editing application. Your material doesn't conform to either of those. The material could be scaled up to fit the screen but it would look pretty ropy.

Just bought the Mac Book Pro 17" - set up all OK but the applications are only showing on a small screen size, not full screen - the background is still visible as a margin - how do I take the view to full screen corner to corner so to speak.

Just bought the Mac Book Pro for my photography - set up and running last night, but the user screens ie Hot Mail, safari etc.. are only half size sat on the background - I have exhausted the help and calibration log...surel this must be simple to fix...any help out there..thanks..Paul.

Have you just moved over from WIndows?
This is standard on Macs. The ability to see more than one window at a time. Some apps - like iPhoto, Aperture etc - have a Full Screen mode. Check out the View menu.
Drag the lower right hand corner to resize the window.
Regards
TD

DPS iPhone best practices - can an app exclude the smaller screen size iPhones?

We hate to provide a bad experience for iPhone4 users, but don't want to build another rendition for just a few people.
Thoughts?

Well I'm not sure if any of the benefits of caf will be apparent to your app given that you are playing and not recording and you are using PCM. I think you can go directly from wav to caf with /Developer/Examples/CoreAudio/SimpleSDK/ConvertFile but I'm not sure. However, if you can produce compressed audio you will have a lot of space savings and you can experiment with sample rates to make a good size / quality tradeoff. I do not know what tools there are to record compressed audio...

E-mail text wrapping

When I'm replying to an e-mail my screen floats and moves all around - I would prefer to "lock" it in place and have my text wrap within the screen view. Is there a way to set this so my screen doesn't "float"?

Cloud stream, did you ever get an answer for this?

Satellite A300 PSAG0A - Games Will Not Display in Full Screen Size

I have a large number of games installed on my computer. At least 90% of them will not display in full screen size but display in a small window with a large amount of black screen surrounding the window. I am running Windows Vista Home Premium 32 bit. However, I do not think it has anything to do with Windows as my husband runs the same games on his Toshiba Satellite L300, running exactly the same version of windows, and they all display in full screen size.
Altering the screen resolution makes no difference. And, of course, I do select the full screen option in the games.
Also, sometimes when I have been playing a game and then closed it I find that my desktop picture has shrunk to the smaller size - the same size as the window in which the game was displayed when I was playing it.
The games work fine in every other way, it is only this small screen size which is driving me nuts.
I hope that someone can help me with this!!

Yes, as far as I can tell I have the latest driver. But, even this is confusing to me because....
My graphics media accelerator is Mobile Intel(R) 965 Express Chipset Family. The installed driver version is 7.14.10.1329. The release date for this is 2007-09-13, as far as I can tell from web searches.
However, on the Toshiba website for driver downloads, the available driver version is 8.2.0.1012 PV. The date is 2006-12-28. I have downloaded this driver and attempted to install it. I get the message that it has been installed but, after rebooting and checking the installed driver version is still 7.14.10.1329.
Perhaps, the 8.2.0.1012 PV version does not actually install because it is older than the currently installed version. I would have thought that the driver version with the higher number would be the newer one, but perhaps this is not the case as the dates do not seem to support this theory.
So now I ask myself, firstly, if the driver available for download on the Toshiba website is not the newest one, then why is it there?
Secondly, if it is the newest one then why will it not install on my computer?

Changing resolution in i3wm causes screen size to shrink

On i3wm, I use xrandr when I use an external screen, such as the following command:
xrandr --output LVDS1 --auto --output VGA1 --auto --same-as LVDS1
This allows me to duplicate my screen on another monitor. However, when I do this, the effective screen size changes: the maximized windows will only fill about 3/4ths of the monitor from left to right. In addition, the right side of the system tray shift so that it fits within this smaller screen size. The rest of my i3bar and my background (using feh --bg-scale) still fill the entire screen. Additionally, I can move my mouse to every part of the screen, and floating windows can exist everywhere. Here's a screenshot depicting the situation. How can I resolve this issue?
Thanks in advance.

i3 guide wrote:
xrandr --output VGA1 --mode 1024x768 --same-as LVDS1
i3 will then use the lowest common subset of screen resolutions, the rest of your screen will be left untouched (it will show the X background). So, in our example, this would be 1024x768 (my notebook has 1280x800).
Looks like it is meant to be that way described in the userguide.

Can Reflow change display tools based on changing screen sizes?

I have a lenghty check list in a desktop-sized view, but want to change to a selection wheel type of display tool for a phone-sized screen. Is there a way to make the display tool change, yet keep the same content simply by reducing down to the smaller screen size?
Is it even possible to add a selection wheel type tool in Reflow? If you don't know what I mean by "selection wheel" I've found this site that has a functioning example. http://www.menuhead.com/example.php

One way of having different content at different screen sizes is to have both elements on your page, and change the display of each of them to either "Block" or "None" depending on whether or not you want it to be displayed for that media query region.
And no, we don't have a selection wheel element in Reflow. Your best bet there is probably to use a box to represent it in Reflow, and then replace it with the desired element using Dreamweaver, Brackets, or whatever other tool you use next in your workflow.
Hope that helps, and thanks for using Reflow!
Vic

Toshiba Bulletin Board screen size shrunk!

Hello,
I have been using the Toshiba Bulletin Board with no problems until recently when I tried to open it and the screen appeared as a tiny rectangle (around 50 x 20 pixels) on the top left corner of my screen. I can't resize it back to it's original size. I have tried restarting the software and rebooting my computer, but it is still opening up with a really small screen size. Has this happened to anyone before? Please help, thanks!
Best,
Elise

Here's your Toshiba Service Station download, Elise. Hopefully, reinstallation will solve your problem.
C.B.
C.B.
Toshiba Sat. C75D-B7260 Win 8.1 64 Bit--Toshiba Sat. L775D-S7132 Win 7 HP SP1 64 Bit and Win 10 PRO Technical Preview--Toshiba Sat. L305-S5921 Win Vista SP2 32 Bit

Planning Layout Column Width and Text Wrapping

Hello,
Is there a way in a BPS layout to set the column width to a certain length and have the column heading texts wrap? I noticed an answer for adjusting a table API for BW Web columns, but not BPS.
Thanks,
Cherie

A coworker figured out by selecting the line break in the change subcomponent it wraps the column text.

Magnified text to wrap to fit screen

I have downloaded an e-book in Adobe Digital Editions. In "custom fit," the magnifications work well, only up to 132% does the text re-wrap itself to fit the screen. In larger sizes (152%+), the right-hand edges are not shown. Is there a way to make the text wrap to fit the screen?

Thomas...same kind of crap here.
I used Custom Text - entered a sentence, hit return, entered another.
Set to 72 pt.
The default alignment is centred - I want left aligned text...the text start point stays at the centre of frame and the sentence runs off the edge of the bounding box.
There is no settings in the Text or Title inspector dialog to correct that!
Using Transform will not sort it!

How to make PowerBook remember screen layouts from small screen to Cinema

I'm using a 23" Cinema Display with my G4 Powerbook. But I often disconnect the display if I need to take the Powerbook with me around the office.
When I do this, I have to reposition all my windows - finder and apps - where I want them on the small screen. Then, when I reconnect to the Cinema Display, I have to reposition them all over again.
Some apps seem to do this fairly well themselves - like Photoshop and InDesign - but others don't.
Is there some way for me to get the Mac to remember the positions of all the windows in each configuration, so I can just switch between them... a bit like the "Location" (under the Apple menu) does for my network settings?
Thanks for any advice.

I don't think that you'll be able to use the HDMI port - I don't think!
Rather, what you would need is a Thunderbolt/Mini DisplayPort to VGA (if that's what the monitor has) adapter -> http://www.monoprice.com/Product?c_id=104&cp_id=10428&cs_id=1042802&p_id=5107&se q=1&format=2.
Good luck,
Clinton
P.S. Does your monitor have any other input ports? DVI would be best.

Text wrap works in Safari/Firefox NOT in IE 6 & 7

I am banging my head against a wall here. I started this site using all CSS and then found out that IE 6&7 users were seeing a text overlap. I've searched and monkeyed and doctored – so now there is no overlap, but the wrap is not workin - the text flows oddly with big gaps.
I can't get this now CSS/HTML hybrid to work. Is there a way to fix this?
Here's the test page:
http://www.yale.edu/egyptology/tester_page9.htm
Here's the CSS I was using:
.imgRight {
   float: right;
   position: relative;
   padding:12px;
   display: inline;
Thank you in advanced,
PB Hastings

Yes. Cleaner code. Open a New blank HTML document. In code view, paste my code into your blank document. Notice the differences - no tables, no span text, etc.. It's much easier without them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="Yale University, Egyptology, Egypt, Theban Desert Road Survey, Thebes, Kharga Oasis, Egyptology PhD" />
<meta name="Description" content="Yale Egyptology is dedicated to the study and exploration of the civilizations, languages, and history of the Nile Valley and its desert hinterlands, from prehistory to late antiquity" />
<title>Yale Egyptological Institute in Egypt: Abu Ziyar and Tundaba</title>
<style type="text/css">
/**zero out browser defaults on everything**/
* {margin:0; padding: 0; line-height: 1; font-size: 100%}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCC99;
font-size: 90%}
*body {font-size: 76%} /**IE only**/
/**LAYOUT**/
#wrapper {
width: 800px;
margin: 0 auto; /**this centers page on screen when used with a valid doc type and width**/
text-align:center; /**for older browsers**/
#mainContent {
background: #FFF;
padding: 12px;
text-align:left;
#footer{
font-size: 12px;
line-height: 2em;
color: #003366;
width: 100%;
background-color: #CCCC99;
padding: 0 15px 0 15px;
text-align: left;
/**FLOATS**/
.fltRight {
float: right;
width: 244px; /**use a px or % width value**/
height: auto;
padding: 12px;
margin: 12px;
overflow: hidden;
.fltLeft {
float: left;
width: 244px;
height: auto;
padding-top:12px;
margin: 12px;
overflow: hidden;
.clear {clear:both; line-height: 1.2; width: 100%; font-size: 12px;}
/**TEXT STYLES**/
p {
font-size: 14px;
color: #003366;
line-height: 1.5;
padding: 12px;
h1,h2,h3 {font-size:1.2em; line-height:2em; padding-bottom: 1em; color: #663300;}
/**LINKS**/
a {text-decoration: none}
a:link {color: #996600;}
a:visited {color:#990000}
a:hover,a:focus {color: #000033}
a:active {color:#0033FF}
/**MISC CLASSES**/
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
</style>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
</head>
<body>
<div id="wrapper">
<div id="mainContent">
<h3>Abu Ziyar</h3>
<div class="fltRight">
<a href="javascript:()"><img src="http://www.yale.edu/egyptology/assets/photos/ziyar_tundaba/Figure_5_small.gif" alt="Figure 5" width="203" height="255" border="0" onclick="MM_openBrWindow('ae_tundaba_illustrations/ae_tundaba_fig5large.html','Figure5','scrollbars=yes,width=550,height=680')" /></a>
</div> 
<p>An extensive Middle Kingdom supply depot, located approximately one-third the distance from the Nile Valley on the northern Girga Road to Kharga, is evidence of a new and previously unsuspected level of official. Sponsorship on routes between the Theban Nile Valarl-C storage jars of thin silt hemispherical cups, carinated and ring-based bowls, small bowls with rilling beneath the rims (Nile B2-C fabric, a form and decoration appearing — like the zirs themselves, after the move to Itjy-Tawy), and other vessels of Middle Kingdom date. The presence of numerous fragments of bread moulds indicates food preparation at the site (Figure 5).A very few fragments of animal bones appeared within an ash layer on the floor of the rectangular structure are evidence that fastidious food preparation took place in the structure.</p>
<div class="fltLeft"> 
<a href="javascript:()"><img src="http://www.yale.edu/egyptology/assets/photos/ziyar_tundaba/Figure_5_small.gif" alt="Figure 5" width="203" height="255" border="0" onclick="MM_openBrWindow('ae_tundaba_illustrations/ae_tundaba_fig5large.html','Figure5','scrollbars=yes,width=550,height=680')" /></a>
</div> 
<p>The best parallels for the entire corpus are early Middle Kingdom, and more specifically thecorpus appears to date to the reign of Sesostris I. The overwhelming majority of ceramic material from square A4 — and from Abu Ziyâr as a whole — is made of Marl C. The enormous number of Marl C zirs is augmented by other vessels of the fabric, the most numerous of these additional forms being jars with corrugated necks (Figure 5a). Several roughly hemispherical bowls with rilling beneath the rims in Nile B2-C fabric (Figure 5b) were found in Square B4,east of the structure, and in Square D4; this form appears, like thezirs themselves, after the move to <em>Itj-tawy</em>.</p>
<div class="fltRight"> 
<a href="javascript:()"><img src="http://www.yale.edu/egyptology/assets/photos/ziyar_tundaba/Figure_3_small.jpg" alt="Figure 3" width="187" height="293" border="0" onclick="MM_openBrWindow('ae_tundaba_illustrations/ae_tundaba_fig3large.html','Figure3','scrollbars=yes,width=510,height=760')" /></a>
</div> 
<p>Sherds from numerous bread molds, including conical and "cupcake," were recovered near and within the structure, and near the ash and charcoal pits in Square D4 (Figure 5c). Remains of mud seals — including document sealings — support the Twelfth Dynasty date of the outpost, and provide evidence for careful administrative control of the activities at the site (Figure 6). The sealed archaeological context of the seal impressions at AbuZiyar and the excellent preservation of several of the important types make this group a small but significant addition to the corpus of early Middle Kingdom Egyptian seals and seal impressions. Most of the sealing types are oval (perhaps sealing small containers; Type III, Figure 6c) and long, ingot-like (sealinom bureaucratic hieratic hand on a limestone pebble, refers to a work foreman and his crew of apparently 300 </p>
</iv> 
<br class="clear" />


<div id="footer">
<p>Copyright 2006 Yale Egyptological Institute in Egypt Supported by the William K. and Marilyn M. Simpson Endowment for Egyptology</p>
<p class="center"><a href="#">Some link text here</a> |<a href="#"> Some link text here</a> | <a href="#">Some link text here</a> </p>
</div> 
</div> 
</body>
</html>
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

RWD, liquid layouts, text wrapping at smaller screen size

Similar Messages

Maybe you are looking for