Template width

Report · May 28, 2022

Hi,

I am using dreamweaver to create a responsive webpage from a template.
I am deleting everything on the template to insert my own images.

All my images have been optimised for 960 px width.

How do I change the template width to be my size?
thanks.

Report · May 28, 2022

Sorry, you are not supplying enough information for us to help you.

1. What template?

2. Why restrict to 960 px?

3. Are you using Bootstrap? Which version?

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

Report · May 28, 2022

No friend is simple fix in code. No need to use Wappler. Dreamwweaver more than capable.

Report · May 29, 2022

I was told that 960 px was the best size to create a responsive as it is half of 1920. Also 480 fits into 960 nicely.

I don't know what bootstap is my template is a standard dreamweaver responsive one.

Report · May 29, 2022

I think the template works on percentages?

You could try changing the width from 960px to 100% in the html source code section.

Report · May 28, 2022

Friend if you can upload code shot I can find

Report · May 29, 2022

Hi, What code do you need me to upload the html or CSS thanks

Report · May 29, 2022

Hi, What code do you need me to upload the html or CSS thanks

By @Beth24643272wyrj

Both html and css.

Report · May 29, 2022

Bootstrap has numerous utility classes for managing responsiveness. Learn those first.

https://getbootstrap.com/docs/4.6/content/images/

Removing code without knowing Bootstrap could adversely impact the usability of your layout and is not recommended. Also DO NOT edit Bootstrap CSS. If you must create custom styles, use a separate CSS file (i.e. mystyles.css or custom.css).

Websites must perform well on ALL devices -- xsm, sm, md, lg, xlg... and everything in between. <img class="img-fluid"> can make large images scale down to fit smaller devices. But it won't make small images up-scale to fit md, lg & xlg devices. On xlg devices (4-5K displays) a 960px image will look like a tiny postage stamp.

For this reason, it's best practice to serve multiple image sizes to browsers with the <picture> element and SRCSET attributes.

https://getbootstrap.com/docs/4.6/content/images/#picture

A working example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 with Picture Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-10 mx-auto">
<!--Change browser width to see the image change.-->
<picture class="mx-auto">
<source srcset="https://dummyimage.com/2300x400" media="(min-width: 2299px)">
<source srcset="https://dummyimage.com/1200x300" media="(min-width: 1199px)">
<source srcset="https://dummyimage.com/960x200" media="(min-width: 959px)">
<source srcset="https://dummyimage.com/780x150" media="(min-width: 779px)">
<img class="img-fluid" src="https://dummyimage.com/480x100" alt="placeholder" />
</picture>
</div>
</div>
</div>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator