Skip to main content
Participant
May 29, 2022
Question

Template width

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

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Community Expert
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
Participant
May 29, 2022

Friend if you can upload code shot I can find 

Participant
May 29, 2022

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

Legend
May 29, 2022
quote

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


By @Beth24643272wyrj

 

Both html and css.

BenPleysier
Community Expert
Community Expert
May 29, 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!
Participant
May 29, 2022

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