Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
No friend is simple fix in code. No need to use Wappler. Dreamwweaver more than capable.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I think the template works on percentages?
You could try changing the width from 960px to 100% in the html source code section.
Copy link to clipboard
Copied
Friend if you can upload code shot I can find
Copy link to clipboard
Copied
Hi, What code do you need me to upload the html or CSS thanks
Copy link to clipboard
Copied
Hi, What code do you need me to upload the html or CSS thanks
By @Beth24643272wyrj
Both html and css.
Copy link to clipboard
Copied
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.