• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

What can I do to make my web design in Dreamweaver cc (2019) to fit my entire screen?

Community Beginner ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

Hi. I have Googled this issue but couldn't find any sensible (that makes sense) answers. My website design in Dreamweaver cc 2019 is 1200px wide at the moment and everything is left alligned. However, I have found an article on centering the design, but, what do I do to get the same website (design) to fit my entire Desktop (PC) screen (from left to right)? Can anybody help/advise?

Views

238

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
community guidelines
Community Expert ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

There are many articles on the subject. I used bing and found https://youtu.be/4myJUbmMC4M

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

Thanks.

 

Votes

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
community guidelines
Community Expert ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

OPTION 1:

Code manually with CSS Flexbox, Grids and media queries with multiple breakpoints for various screen sizes (mobile portrait, mobile landscape, small tablets, big tablets, laptops, desktops, 4k and 5k displays, etc...) 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

 

OPTION 2:

Reduce production time and save yourself from tedious manual coding by using Bootstrap's mobile-first framework.

https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.6/getting-started/introduction/

 

There are other responsive frameworks you could use (Foundation, Skeleton or hybrids).  But Bootstrap is the most popular, currently in use by millions of sites worldwide, and it's already integrated into Dreamweaver's UI.

 

To get started with Bootstrap in Dreamweaver:

1. Create a new site folder for your responsive project. Site > New Site...

2. Go to File > New > Starter Templates > Bootstrap Templates.

3. Choose a layout.

4. Hit the Create button.

5. Save as index.html

 

Post back if you have any questions.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

Just to add an expression used by others: Bootstrap is the industry standard.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

Thank you Nancy!

 

Votes

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
community guidelines
Community Expert ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

...what do I do to get the same website (design) to fit my entire Desktop (PC) screen (from left to right)? Can anybody help/advise?

 

=============

How big is a piece of string?  It could be any size, right.  The same is true for people's web devices.  There's big, bigger, biggest as well as small, smaller, smallest and everything in between.  So your 1200px wide layout won't work on all devices. Something has to give. 

 

Responsive typically means 1 website with multiple columns on large and x-large viewports breaking to fewer columns on medium devices, down to one column on small and x-small devices. Adobe Portfolio -- free with your paid Creative Cloud Plan -- is good example of responsive web layouts.

https://portfolio.adobe.com/examples/

 

As discussed previously in another thread, tables won't work for this and should be avoided except when you absolutely must use them for charts or spreadsheets. And even then, I try to avoid tables or hide them from small devices because they aren't responsive enough.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

Thanks for the advice. At least now I know what the facts are and what to Google/Youtube for if I need to find out more.

Votes

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
community guidelines
LEGEND ,
Feb 25, 2021 Feb 25, 2021

Copy link to clipboard

Copied

LATEST

Building a responsive website, one which adapts to all sizes of browser window is a very simple concept. Instead of using fixed sized widths like px (1200px) use %  (100%) - a container set at 100% width will take up 100% of any browser window.

 

Once you grasp the concept of dropping pxs to set widths and using a flexible width approach it becomes very simple. There are frameworks you can use, mentioned in this thread, where you deploy default css classes to your containers which will automate the process. Whilst hugely popular they arent optimised for a steamlined worflow but better than nothing if you cant grasp the concept of manually deploying a responsive build.

 

Votes

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
community guidelines