Highlighted

Dreamweaver CC 2015: Browser Adjustment

New Here ,
Jan 22, 2018

Copy link to clipboard

Copied

I have been having an issue when it comes to my web preview rearranging my content when I change the size of the browser and when I use the site on other computers with varying screen sizes. All I want to do is make it so it is all consistent across all platforms. I have been coding it using HTML and CSS rather than using the design feature.

If anyone could help make the items static that would AMAZING! Thank you for your time.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

skies4ever  wrote

All I want to do is make it so it is all consistent across all platforms.

If anyone could help make the items static that would AMAZING!

Sorry but a one-size-fits-all approach doesn't work in modern web design.  A desktop layout won't fit smaller mobile devices as there's not enough screen space.  And a mobile layout would look mighty silly on desktops.  So what you think you want and what your site visitors actually expect are 2 completely different things.   See screenshot.

Learn all you can about responsive web design with CSS media queries.  

HTML Responsive Web Design

Optionally, you could use a responsive framework like Bootstrap which is built-in to Dreamweaver.

Bootstrap 4 Tutorial

Or you could purchase a commercial layout like this one from Project Seven.

PVII CSS Affinity: Responsive and Mobile-Ready layouts for Dreamweaver

Nancy

Views

185

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dreamweaver CC 2015: Browser Adjustment

New Here ,
Jan 22, 2018

Copy link to clipboard

Copied

I have been having an issue when it comes to my web preview rearranging my content when I change the size of the browser and when I use the site on other computers with varying screen sizes. All I want to do is make it so it is all consistent across all platforms. I have been coding it using HTML and CSS rather than using the design feature.

If anyone could help make the items static that would AMAZING! Thank you for your time.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

skies4ever  wrote

All I want to do is make it so it is all consistent across all platforms.

If anyone could help make the items static that would AMAZING!

Sorry but a one-size-fits-all approach doesn't work in modern web design.  A desktop layout won't fit smaller mobile devices as there's not enough screen space.  And a mobile layout would look mighty silly on desktops.  So what you think you want and what your site visitors actually expect are 2 completely different things.   See screenshot.

Learn all you can about responsive web design with CSS media queries.  

HTML Responsive Web Design

Optionally, you could use a responsive framework like Bootstrap which is built-in to Dreamweaver.

Bootstrap 4 Tutorial

Or you could purchase a commercial layout like this one from Project Seven.

PVII CSS Affinity: Responsive and Mobile-Ready layouts for Dreamweaver

Nancy

Views

186

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 22, 2018 0
Adobe Community Professional ,
Jan 22, 2018

Copy link to clipboard

Copied

You could fix the width of your <body> element with css, and the contents should stop re-flowing.

However...

That's generally considered the opposite of what you want to do in web design. These days, we use CSS Media Queries to reflow a web page for specific break points (steps in screen sizes), along with fluid designs (set in % widths), to give a better experience than a static page that needs to be swiped and pinched in order to navigate on small screen devices.

Either way, it's difficult to give you any specific help without seeing your work in progress.

Could you post a link to your page so we can take a look with our browsers?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2018 1
Adobe Community Professional ,
Jan 22, 2018

Copy link to clipboard

Copied

skies4ever  wrote

All I want to do is make it so it is all consistent across all platforms.

If anyone could help make the items static that would AMAZING!

Sorry but a one-size-fits-all approach doesn't work in modern web design.  A desktop layout won't fit smaller mobile devices as there's not enough screen space.  And a mobile layout would look mighty silly on desktops.  So what you think you want and what your site visitors actually expect are 2 completely different things.   See screenshot.

Learn all you can about responsive web design with CSS media queries.  

HTML Responsive Web Design

Optionally, you could use a responsive framework like Bootstrap which is built-in to Dreamweaver.

Bootstrap 4 Tutorial

Or you could purchase a commercial layout like this one from Project Seven.

PVII CSS Affinity: Responsive and Mobile-Ready layouts for Dreamweaver

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 22, 2018 0