Need help with hiding divs for different screen sizes with fluid layouts.

Ok, so i've got a single page giving info that my website is coming soon and i've designed it for pc, tablet and mobile as i should. I have hidden the divs i don't want from each view and when testing it, all works fine and as it should be but when it is on the server and live, it shows all the divs that are meant to be hidden on one screen????? Is there something else i should be doing and can anyone help me here or is this a question for my host???
Thanks for any help in advance

Probably a coding issue. Without a link, no way to help.
Nancy O.

Similar Messages

Resizable page for different screen sizes but with static image content. Shall I use media query?

I’m making a page that has of mostly image content. It’s a large circle in the middle so I want it to be centered vertically and horizontally. I also want it to stay centered and resized proportionally for different screen sizes. I’ve read about media query but it seems to me that the elements just become fluid. Can I make the elements stay in place using the media query?
I’m working in Dreamweaver CS5.5

Here's the code I'm working with now, I've taken away the things that I don't really understand.
It's working but I guess it won't hold when I start with the media queries.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">
body {}
div {
   font: 12px Arial;
span.bold { font-weight: bold; }
#the-circle {
height: 960px;
width:960px;
margin-left:650px;
margin: 0px 10px 0px 10px;
margin-left:650px;
.link-row {
position:absolute;
width: 960px;
height: 74px;
top: 130px;
left:660px;
.link-row-2 {
   position: absolute;
   width: 960px;
   height: 74px;
   top: 300px;
   left:660px;
.link-row-left {
float: left;
.link-row-right {
float: right;
.link-row-right {
float: right;
.link-row-right {
float: right;
</style></head>
<body>
<br /><br />
<div id="the-circle">
<img src="ACE Test/Logo-DW.png" width="960" height="960" />
</div>
<div class="link-row">
<div class="link-row-left"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
</div>
<div class="link-row-2">
<div class="link-row-right"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
</div>
</body></html>

Scaling front panel objects for different screen sizes

Hi,
Can anybody help me of designing Vi for different screen sizes. I have designed a VI for a monitor of small size and lower resolution but when I open the same Vi on a different monitor,objects are not aligned properly. The properties which I have changed are
Window appearence->Default
Window Size -> Panel size 0,0 & Tick marked options of Maintain propotions for different monitors and scale all objects
Window Run Time position-> Maximum
Regards
Imran
Solved!
Go to Solution.

Imran,
I can't solve your problem entirely. However when I have to write a program that will be deployed on a variety of monitor sizes, I tend to set the size of the Front Panel to suit the smallest monitor, and then remove the ability of the user to resize it.
Also, set it to run in the centred position.
See attachments.
Many Thanks,
Dan
Dan
CLD
Attachments:
Customize Window Appearance.JPG ‏44 KB
VI Properties.JPG ‏29 KB

How do you open a project started in Muse, Dreamweaver, or other to tweak for different screen sizes

How do you open a project started in Muse, Dreamweaver, or other design program to tweak for different screen sizes?

Hi. As of now HTML import is not plan of record for Reflow 1.0. See this FAQ for a bit more info - http://forums.adobe.com/message/5071510#5071510.
-C

Site Formatting for different screen sizes

Hi there,
I am designing a website for a customer and having some problems with the site fitting on different screens. I set it to what I was led to believe is the universal resolution/screen size, and it looks great on large, wide-screen computers, but doesn't fit right and requires lots of scrolling on smaller screens. I also have a pop-out light box feature when visitors click TEAM and it doesn't fit on smaller screesn either. How can I make the site auto adjust to different screens? This is a big must for the customer and I'm still pretty new to MUSE so i don't entirely know what I'm doing. Any help would be greatly appreciated.
The site is: http://apopecary01.businesscatalyst.com
Thanks!
Nick

Truly variable width "liquid" layouts are not supported. However, visual designs that fill the full browser width are possible using browser fill image tiling and 100% width page items. Also page item pinning and browser fill scrolling can be leveraged to create designs where content moves relative to each other when the browser window height or width changes.
We may be exploring responsive layout options for Muse in the future, but right now it is fixed width only.
- Abhishek Maurya

Panel collection with auto height for different screen resolution

Hi.
I created a page using panel collection by default height for 1024 * 768 screen resolution and works fine. When I change the screen resolution to 1152 * 864 then my page layout changes as I can see lot more space at bottom due to fixed height define for panel collection.
Here my question is how to make height as dynamic for panel collection which can changed based on screen resolution. Usually percentage for height attribute resolve the issue but JDev 11.1.1.4.0 doesn't support percentage its allows only pixel or em.
Please let me know to resolve this issue.
Thanks

If you want a table to occupy 80% of the height of the screen you should be able to do this with assigining % to the various panelStretch facets - like this:
    <af:form id="f1">
      <af:panelStretchLayout id="psl1" topHeight="10%" bottomHeight="10%">
        <f:facet name="bottom">
          <af:spacer width="10" height="1" id="s2"/>
        </f:facet>
        <f:facet name="center">
          <af:panelCollection id="pc1">
            <f:facet name="menus"/>
            <f:facet name="toolbar"/>
            <f:facet name="statusbar"/>
            <af:table var="row" rowBandingInterval="0" id="t1">
              <af:column sortable="false" headerText="col4" id="c1">
                <af:outputText value="#{row.col4}" id="ot1"/>
              </af:column>
              <af:column sortable="false" headerText="col5" id="c2">
                <af:outputText value="#{row.col5}" id="ot2"/>
              </af:column>
            </af:table>
          </af:panelCollection>
        </f:facet>
        <f:facet name="start"/>
        <f:facet name="end"/>
        <f:facet name="top">
          <af:spacer width="10" height="1" id="s1"/>
        </f:facet>
      </af:panelStretchLayout>
    </af:form>

How do I autofit the site for different screen sizes?

I've built my site in iWeb. But is there a way to have it autofit to the size of the screen it is being displayed on? For example, I built it on my 24 inch 16x9 display at home. I built it using dimesnions so that there are no scroll bars left or right. I get a nice full page. But, when I visit the page on a smaller 4x3 display for example, it doesnt shrink to the new size screen. It just shows what it can then you have to scroll left/right to see the rest of the page.
So is there a functionality in iWeb, or a work around, to have it adjust according to the size of the screen it's being viewd on?
Any help would be greatly appreciated.
Thanks!

The "dynamics" for the textboxes are only vertical, not horizontal.
To have everything move vertical and horizontal, you have to add width attributes to the text boxes. I tried it with a percentage. But did not like the result.
The displayed text are separate textfiles that are loaded with AJAX.
So once you have made the textboxes change their width with JavaScript, these text files fill the available space.
You also have to make the width and height of pictures and movies dynamic.
You can make it as complicated as you like.

Best resolution for different screen sizes?

Hi,
I just created a project and several of the viewers complained that they had to scroll horizontally in order to view the movie.
What is the best resolution to record my next project in so as to ensure that no user will have to scroll (neither vertically or horizontally) to see the contents?
Alternatively, is there some type of feature that automatically adjusts the contents to the viewer's screen?
Thanks very much in advance.

Hi there
I think many folks use 800x600 as a common size.
Choosing the "Best" resolution is nearly always a bit of an art form. You need to consider the lowest common denominator. For example, are your tutorials intended for senior citizens? If so, then you need to consider that they may be running an older computer configured for a smaller resolution.
There are ways to coax the video to play back at whatever resolution is available, but they all will involve a sacrifice in quality. This is because any time you play back your project at a different size than it was recorded, the quality will suffer. The degree to which it suffers depends entirely on how much scaling is happening. Scale just a little and it's not too bad. Scale a lot and things go downhill.
One way to allow scaling is to link to the .SWF instead of the .HTM that is produced. Another way is to edit the HTML page Captivate creates. Remove the pixel values and insert percentages.
Cheers... Rick
Click here for Adobe Certified Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

Banners for different screen sizes...

If I have 2 SWF files that I want to use as the banner or header at the top of the page and want to use one for mobile, and the other 2 bigger ones for tablets and desktops, how do I do this in the media query? I'm trying to reconstruct the site to make it more mobile friendly. The reason I'm using a swf is because I've got rotating images in the banner. I'm new to this and really wanting to learn more on media query. I'm using Dreamweaver CS6 on a Windows 7 64-bit machine.

Hi
The simple answer is, "don't bother".
swf's will not work on apples idevices, and the flash player development for the android devices was dropped last year.
You could use Adobes Edge for this and use your swf as a fallback for devices that do not support the Edge animation, for Edge see - http://labs.adobe.com/technologies/edge/
For the use of media-queries see - http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
PZ

Need help resizing pages for different screens

Hey guys,
Ok well I made this website that has a lot of pages now and
the only problem is that I have a 21" widescreen monitor so
everything I created has to be scrolled on a lot of smaller
screens. I'm almost possitive that there is a way to tell the html
to resize the website when different screen sizes are detected. Any
help would be great. Thanks.
Also if there is a way to do this, then would it be possible
to change the settings sitewide without using templates?
Jeremy

> I'm almost possitive that there is a way
> to tell the html to resize the website when different
screen sizes are
> detected. Any help would be great. Thanks.
There is - it's called "design"! You have to build the page
to be
flexible - see this tutorial as an example of how to do it
with tables:
http://www.dwfaq.com/tutorials/Tables/flexible_tables.asp
Once you have the page built, you cannot just drop in a magic
pill and make
it resize itself.
And remember, screen size is not the real variable you need
to worry about -
it's browser viewport size. Even when you know my screen is
1280x1024, you
still do not know what my browser size is.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dayencom" <[email protected]> wrote in
message
news:eiqmfu$33q$[email protected]..
> Hey guys,
>
> Ok well I made this website that has a lot of pages now
and the only
> problem
> is that I have a 21" widescreen monitor so everything I
created has to be
> scrolled on a lot of smaller screens. I'm almost
possitive that there is a
> way
> to tell the html to resize the website when different
screen sizes are
> detected. Any help would be great. Thanks.
>
> Also if there is a way to do this, then would it be
possible to change the
> settings sitewide without using templates?
>
> Jeremy
>

My iphone serial number claims to have been replaced. But it is actually not. I need to get it replaced for a screen issue ASAP! Please help

My iphone serial number claims to have been replaced. But it is actually not. I need to get it replaced for a screen issue ASAP! Please help

This was told to me by Apple Store reps... They have asked to contact Apple support help line .. nobody answers there.. I am stuck! There is no email id that i can find either to contact Apple support

I need help Centering a div box to a background image using dreamweaver cs5.5.

I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.com

Have you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O.

How to programmatically resize vi for different screen resolutions ?

Hi,
I have been struggling with this,How can i built a vi that should run for different screen resolutions (on different pc's).
There are several threads on forum , But i dont find the exact solution for it.
I have already tried with VI properties in the VI but i dont think its working.
Can someone please help me ?
Thanks and regards,
Shivkant Paswan

Yup it is a pain to use panes, but that is the easiest method I've found which meets my requirements. Learn to use panes and splitters effectively, and then learn their limitations and workaround when you find those limitations. In general LabVIEW should handle multi-resolutions, and resizing better but these are the tools we have today.
Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
If 10 out of 10 experts in any field say something is bad, you should probably take their opinion seriously.

Optimizing captivate file for different screen resolution

Hi,
I've a problem in optmizing the captivate file for different screens like laptop,netbook and pc. In PC's and laptops, this is not a major issue as the size of the screen is large. But when we play the captivate generated swf file in a netbook, the whole website gets resized to fit in to the resolution of the screen except the captivate file.Captivate file gets truncated in such a way that, the user can read only half of the slide.
Thanks in advance
Parvathy

One thing you can try is adjusting the swf dimensions manually. I haven't found a way to do it in Cp. We had a similar problem with some eLearning we built that all our testers used just fine. But once someone undocked their laptop and was off their desktop monitor, had the same problem you describe, where the bottom of the movie was cut off.
Once you publish the files, open the .htm file with notepad or your text/html editor of choice.
Look for a line that looks something like this:
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "1100", "798", "10", "#CCCCCC");
or
var so = new SWFObject("filename.swf", "Captivate", "1600", "1200", "10", "#CCCCCC");
Change those numbers in quotes to 100%, like this:
var so = new SWFObject("filename.swf", "Captivate", "100%", "100%", "10", "#CCCCCC");
save the .htm
My experience has been it will adjust the swf so it fits either the height or width of the display, whichever is shorter. That is, it will either fill the top to bottom OR side to side, but keep the swf in proportion.
hope that helps.

Need help in developing BADI for IT0001

Hi All,
I need help in developing BADI for IT0001.
On IT0001 create or change, there is need to update IT0017 with following data from IT0001
-Company Code
-Cost center
-Business Area
-Begin and End Date.
Other fields from IT0017 need to be derived from Position and update in IT0017.
Please guide me how I can address this. I do not want to go for dynamic action, as it is not getting evoked during background jobs.
I am new to BADI development and will appreciate step by step instructions.
Thanks

Hi,
     follow the below steps to achive
Steps:
1.     Execute Business Add-In(BADI) transaction SE18
2.     Enter BADI name i.e. HRPAD00INFTY and press the display
        button
3.     Select menu option Implementation->Create
4.     Give implementation a name such as Z_HRPAD00INFTY
5.      You can now make any changes you require to the BADI within this
        implementation, for example choose the Interface tab there are 3 methods avialble
6.     Double click on the method you want to change, you can now enter
        any code you require.
7.      Please note to find out what import and export parameters a
        method has got return the original BADI definition
        (i.e. HRPAD00INFTY) and double click on the method name
        for example within HRPAD00INFTY contract is a method
8.      When changes have been made activate the implementation
<b>Reward points</b>
Regards

Need help with hiding divs for different screen sizes with fluid layouts.

Similar Messages

Maybe you are looking for