Skip to main content
Participant
September 16, 2024
Question

Having a website that works well on ALL devices [Responsive Web Design]

  • September 16, 2024
  • 2 replies
  • 277 views

Hello there!

 

So I recently started working with Dreamweaver, I am using the 2021 version and have made a website I am fairly happy with. Now the thing is it looks as intended on my laptop, but when the site is visited by my boyfriend who has a way bigger screen, the entire website looks all messed up. Same goes for when you open it on a phone or even a slightly bigger laptop. 

 

Is there an easy fix for this in Dreamweaver itself? 

 

Thank you for your time 🙂

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Community Expert
September 16, 2024

Short answer:  No.  Responsive design begins at the planning phase, not at post-completion.  Sorry.

 

Long answer:  Start over with one of the pre-built Bootstrap starter Templates in Dreamweaver.  Bootstrap is mobile-friendly and performs well on all-size devices -- small, big and everything in between.  And it will cut your site creation time in half so you can focus more on content instead of architecture.

 

Go to Site > New Site and define a new local site folder.  C:\MyNewSite

 

Go to File > New > Starter Templates > Bootstrap Templates.  Choose a Sample Page Layout and hit CREATE button.

 

Save as index.html (your home page)

Dreamweaver will create the starter site folders & scripts for you in your Files Panel (F8).

See screenshots.

 

Replace starter text & images with your own.  See links below for reference tutorials.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

- https://www.w3schools.com/bootstrap/

 

NOTE: As of this writing, the current Bootstrap version is 5.3.  You can obtain the latest CSS & JavaScript bundles from Bootstrap's Official CDN (Content Distribution Network) below.

https://www.bootstrapcdn.com/

 

Or simply replace references to Bootstrap scripts in your document to these:

CSS - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

JS - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js


Hope that helps.

 

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
Community Expert
September 16, 2024

I am sorry to be the bearer of bad news; Dreamweaver does not 'fix' anything. All it will do is help a developer to create a website. It is a tool.

 

To find out more about responsive web design, see https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

 

You could use a responsive framework like Bootstrap to make life easier,

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!