Skip to main content
L
Lizzie_Jo_Websites__11
Inspiring
April 14, 2017
Question

Is there a way to make my webpages become fluid only on lower resolutions?

  • April 14, 2017
  • 5 replies
  • 4838 views

I'm working on a website in Dreamweaver CC 2015 that I want to be fluid, but I would like to find a way to make it responsive only phones and tablets.

Basically, an example would be...

On a desktop monitor at a resolution of 1280 x 720 and above, I would like the website to be a regular non-responsive site, allowing for the ability to use the IE11 "ctrl +" method (and other browser's equivalent) to zoom in and out without distorting the page to "fit the screen."

However, for phones and tablets, I would like to make the site become responsive/fluid at that point, adjusting everything to display accurately on the smaller mobile devices.

Is there a way I can do this? I have been trying to find a way from within Dream Weaver, but so far I have not found anything. I don't know if there is a feature, or I'll have to do some coding to get something like this done? I know I would have to do it for every page as well, since the site will be static.

Thank you for anyone's ability to help. ;- )

This topic has been closed for replies.

5 replies

O
osgood_
Legend
April 17, 2017

Not really been following much of this thread as I can't really understand what is required. Could using em as the fixed width be what you are looking for, simple example below: This allows images to be zoomed in desktop but retain their size in mobile.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Fixed-Responsive</title>

<style>

.hero_image img {

width: 100%;

}

.page_wrapper {

width: 63em;

margin: 0 auto;

}

header {

display: flex;

justify-content: space-between;

background-color: #FC9;

}

.content_aside_wrapper {

display: flex;

justify-content: space-between;

}

.content {

background-color:#9CC;

width: 65%;

}

.sidebar {

background-color: #CC3;

width: 30%

}

.footer {

background-color:#CC9;

}

@media screen and (max-width: 768px) {

.page_wrapper {

max-width: 100%;

margin: 0 auto;

}

.content_aside_wrapper {

flex-direction: column;

}

.content {

width: 100%;

}

.sidebar {

width: 100%;

}

}

</style>

</head>

<body>

<div class="page_wrapper">

<header>

<div class="logo">

<h2>Logo</h2>

</div>

<!-- end logo -->

<div class="tel">

<h2>Telephone</h2>

</div>

<!-- end tel -->

</header>

<!-- end header -->

<div class="hero_image">

<img src ="http://images.all-free-download.com/images/graphiclarge/blue_morpho_butterfly_189907.jpg"  />

</div>

<!-- end hero_image -->

<div class="content_aside_wrapper">

<main class="content">

<h2>Main Content</h2>

</main>

<!-- end content -->

<aside class="sidebar">

<h2>Sidebar</h2>

</aside>

<!-- end sidebar -->

</div>

<!-- end content_aside_wrapper -->

<footer class="footer">

<h2>Footer</h2>

</footer>

<!-- end footer -->

</div>

<!-- end page_wrapper -->

</body>

</html>

pziecina
pziecina
Legend
April 17, 2017

Not really been following much of this thread as I can't really understand what is required.

I don' think anyone understands what is being asked.

As near as I can work out the OP wants to disable zoom except for images in desktop browsers. Which goes against every best practice, and accessibility conformance introduced over the last 15 years.

I am still unclear about the mobile/desktop requirements though, as I am still reading that requirement as responsive for mobile and fluid for desktop, (I could be completely wrong though ).

L
Lizzie_Jo_Websites__11Author
Inspiring
April 17, 2017

pziecina  wrote

I don't think its a deliberate action by either website, its just the way they have been built and what happens. The developers probably don't even know it happens.

The entire question has me confused.

The OP wants to stop the user from using zoom to enlarge the text in IE, which even Microsoft admitted was a bug at the time, and only happened when absolute font sizing was used, (explicit pixel sizes).

On mobile devices, iOS 10+ has already disabled any setting that stops the user zooming the page, that includes using font-size-adjust and the meta viewport scalable attribute to do so, with Google also saying that Android will also introduce the blocking of such developer coding features.

Its official then 2 + 2 -1 = 6. Mark this answer as correct so I can obtain my food ration vouchers.


2 + 2 - 1 = 6 is basically what I am hearing from pziecina and yourself right now. I am not trying to be mean here, but the only one who has seemed to understand at least a little bit what I am saying is Nancy. I'm not sure how to simplify this any further...

First of all, I never said anything about the text whatsoever. I do not want to restrict the text size upon zooming, and nothing I am trying to do goes against any kind of web design "practice", except "partially" the images, but that is something that no user will see happen until they zoom in, mobile or not.

Simplified...

I want (or the person I'm doing this for, actually wants) the website to be a responsive site. Your average responsive site with no text restrictions (...0_O...) and no peculiar design strategy outside of the norm.

What I do want is that when you have a fully maximized window on your desktop. Your web browser will allow you to zoom in on said webpage, expanding the image beyond its actual dimensions (like your web browser would allow you to do if you opened any JPG, PNG, GIF, whatever) with everything else continuing to be responsive and fit into the screen as it would (however, again, allowing the text to grow as much as it wants as it usually would) and that is all I need this site to do, "breaking" only one "rule", which is actually irrelevant to anything outside of the web browsers ability to zoom in.

Again, I'm not trying to be mean or offensive, its just that what I want is so simple, yet no one understands what it is I'm asking, even though we are using a forum that abides these rules, and most websites on the internet do exactly what I am referring to, responsive design and all...

crisgarcia6OT
crisgarcia6OT
Participating Frequently
April 15, 2017

what happens if you Install Dreamweaver on A computer that is 1366 x 768?

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 15, 2017

You could test for device and load the relevant style sheet as per Targeting Specific Devices in your Style Sheets

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 14, 2017

I'm working on a website in Dreamweaver CC 2015 that I want to be fluid, but I would like to find a way to make it responsive only phones and tablets.

I'm sorry to say this, Lizzie Jo, but this made me laugh.

Unless this site will be viewed on a corporate intranet and everyone has exactly the same equipment & software, it's not a realistic approach to web design anymore.  Some people have super huge,  high pixel density displays and other people have average sized & density displays and still others have everything in between.  I'm not even talking about people who use TV screens for internet browsing.  Nowadays, you really need a fully responsive web site that everyone can enjoy. 

Short answer:   Use percentage widths and CSS media queries. 

Or jump start your responsive site with a framework like Bootstrap.  Like it or not, rebuilding your site with a framework will save you a lot of time and coding agony.

In Dreamweaver CC 2015 or 2017, go to File > New >  *see screenshots below*.

After you Save & name your newly created file, DW will create the assets folders for your responsive project.

Have fun with it!

Nancy

Nancy O'Shea— Product User & Community Expert
L
Lizzie_Jo_Websites__11Author
Inspiring
April 15, 2017

I read up more on media queries. Although, I am somewhat confused on what I have to do. I am not an expert by any means.

I think there might have been a misunderstanding in what I want to do...?

(I am actually using 2017, I made a mistake and typed 2015, sorry.)

For an example, let's take www.amazon.com. On my desktop, nothing attempts to "fit my screen". If I use IE11 to zoom in, a scroll bar will appear at the bottom, and I'll have to move from left to right, to read the text, or view a complete image.

However, amazon has no problem scaling itself accordingly to fit a mobile device, such as a phone or tablet. The website does not appear extremely small and text and images don't "stretch the screen.

This is more or less what I aim to accomplish.

I don't have a website built yet at all, so I don't need to change anything I have already done. The main idea is simply a screen that does not completely uniform Itself (text and images) to a desktop view.

In fact, the website we are using right now, is capable of the same thing, is it not?

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 15, 2017

There are a number of ways that you can achieve your objective. Just to name two

I prefer to use Bootstrap because it is a complete framework, meaning that it contains a lot of ready made components that slip seamlessly into your design.

The Flexbox way requires coding from scratch. Components will have to be coded while others, like a slider, are available on the internet.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
April 14, 2017

Have you heard of media queries?

Assuming you know css you can change the css properties at any break point. For instance to change the background color of a page at 768px wide you would use a media query, like below:

@media screen and (max-width: 768px) {

body {

background-color: yellow;

}

}

You also need to include the viewport meta tag in the <head></head> section of your page:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Usually these days responsive designs use %percentage widths as its easier to manipulate for any device.

I dont know how successful it will be to try and take a fixed px with design and manipulate it to become responsive. Usually its a non-starter, depending on the complexity of the set-up

pziecina
pziecina
Legend
April 14, 2017

Use a media-query set to the minimum size that you do not wish the page to be responsive, then set a minimum and maximum width for the body tag.

The zoom in/out should work in IE even in a responsive site, unless you set the user-scalable attribite to disallow it. Which is now ignored in iOS10+ deveices, and is planned for implementation on Android.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices