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

[Daniel5E84]

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?

[BenPleysier]

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

[Daniel5E84]

Thanks.

[Nancy OShea]

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.

[BenPleysier]

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

[Daniel5E84]

Thank you Nancy!

[Nancy OShea]

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

[Daniel5E84]

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.

[osgood_]

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.