Template width

Forum|Forum|3 years ago
May 29, 2022
3 replies
369 views

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.

How to

This topic has been closed for replies.

Nancy OShea

Community Expert

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