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 20, 2017

From what I can deduce from testing once the media query break is added to the css for 768px  for some reason it affects the zoom in Chrome.

Try adding the media query with jQuery (see below). Obviously you will need to view on a tablet or smartphone, its not going to work by just narrowing and widening the desktop browser.

Does that make a difference?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

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

<title>Zoom</title>

<style>

.page_wrapper {

width: 65em;

background-color: #f2f2f2;

text-align: right;

margin: 0 auto;

}

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {

.page_wrapper {

width: 1280px;

text-align: right;

margin: 0 auto;

}

}

header {

text-align: center;

}

header h1 {

margin: 0;

padding: 30px;

}

.main_content {

overflow: hidden;

}

.main_content img {

width: 100%;

}

footer {

text-align: center;

}

footer h1 {

margin: 0;

padding: 30px;

}

.mobile {

width: 100%;

}

</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

if ($(window).width() < 769) {

$('.page_wrapper').addClass('mobile');

}

});

</script>

</head>

<body>

<div class="page_wrapper">

<header class="header">

<h1>Header</h1>

</header>

<!-- end header -->

<main class="main_content">

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

</main>

<!-- end main_content -->

<footer class="footer">

<h1>Footer</h1>

</footer>

<!-- end footer -->

</div>

<!-- end page_wrapper -->

</body>

</html>


This is probably my fault somehow, but when I send the HTML page I made, to my phone, it doesn't do anything.

it says...

HEADER

FOOTER

and an "X" for the image.

Did I need to do more than just paste the code into an HTML document?

I'm on Android 5.1.

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