Skip to main content
D
Daniel5E84
Participating Frequently
February 21, 2021
Question

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

  • February 21, 2021
  • 3 replies
  • 563 views

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?

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 22, 2021

    ...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
    D
    Daniel5E84Author
    Participating Frequently
    February 25, 2021

    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.

    O
    osgood_
    Legend
    February 25, 2021

    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.

     

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      February 21, 2021

      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
        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        February 21, 2021

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

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        February 21, 2021

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

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          D
          Daniel5E84Author
          Participating Frequently
          February 21, 2021

          Thanks.

           

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices