• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Template width

New Here ,
May 28, 2022 May 28, 2022

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.

TOPICS
How to

Views

185

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 28, 2022 May 28, 2022

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?

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 29, 2022 May 29, 2022

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 29, 2022 May 29, 2022

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. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

Friend if you can upload code shot I can find 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 29, 2022 May 29, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2022 May 29, 2022

Copy link to clipboard

Copied

quote

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


By @Beth24643272wyrj

 

Both html and css.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2022 May 29, 2022

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines