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 ).

O
osgood_
Legend
April 17, 2017

pziecina  wrote

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 ).

Well the 2 urls mentioned thus far Amazon and Google are just doing what they will do if the containers/content are set to some kind of fixed width and not percent, eventually they will exceed the width of the browser window width and evoke a horizontal scrollbar.

Neither zooms just the images, the text zooms as well. 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.

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?

L
Lizzie_Jo_Websites__11Author
Inspiring
April 17, 2017

What I understand the problem to be, the OP needs the desktop version to remain the same layout, a la pre-responsive web design, and mobile versions to be responsive. As Paula and I have stated, the only way to do that is by detecting the device. A Google search will lead to many solutions, one such search delivered Detecting Mobile Devices with PHP .

Once the device has been determined, one of two style sheets can be loaded.


As simply as I can think to describe it, is that I need my images to "react" when I use IE 11 "zoom in" function.

...Or any other web browser obviously. Even on a responsive website like Apple's, I can use the above function to zoom in on a page, and while the text and icons and everything will re-order itself, they won't stay the same human-visual size. If I zoom in enough, they will begin to exit the screen, and I won't be able to see the entire image, without zooming back out, or a scroll bar... although apple's image just gets cut out of the screen, there are other sites, where a scroll bar will eventually appear. Not on mobile, but for a desktop.

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