Skip to main content
Daniel5E84
Participating Frequently
Feb 21, 2021 8:01 AM UTC
Question

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

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 is closed to new replies. Start a new post to keep the conversation going.

    8 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Feb 22, 2021 12:21 AM UTC

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

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    Daniel5E84Author
    Participating Frequently
    Feb 25, 2021 10:32 AM UTC

    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.

    Translate
    osgood_
    Legend
    Feb 25, 2021 11:05 AM UTC

    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.

     

    Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Feb 21, 2021 6:03 PM UTC

      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.

       

      Translate
      Nancy O'Shea— Product User & Community Expert
        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        Feb 21, 2021 10:43 PM UTC

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

        Translate
        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
        Feb 21, 2021 8:28 AM UTC

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

        Translate
        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Daniel5E84Author
          Participating Frequently
          Feb 21, 2021 9:50 AM UTC

          Thanks.

           

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