How do I control varying page content width?

Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

I'm thinking that most of my pages contents do not need full width in the body of each page. But I would like to have full-width page headings, perhaps even some full-width elements in a page that is limited to say 1200px wide.  Something like this:

Galeodan_0-1620235485991.png

If I set a reduced body width, 

        body {
            max-width1200px;
            margin-left: auto;
            margin-right: auto;
            etc...................
        }

How do I then override this for a full-width element?

.fullwidthheader {

          something to override and set body width to 100% only for this class

          }

If this isn't on, what's the best alternative? Do I set body width to 100% and then put all the content in a reduced-width container?

        .pagecontent {
            max-width1200px;
            margin-left: auto;
            margin-right: auto;
            etc...................
        }

 

Views

940

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

Stop working with pixels.

 

Use % throughout. 

 

To fill the screen with your banner image, use width:100%.  But keep in mind that a low res JPG or PNG  banner that is upscaled beyond its native file size will look very pixelated on larger displays.  But if you use SVG images instead of rasters, you won't have that problem because SVGs are math-based instead of pixel-based. See screenshot.

 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_GraphicsSource: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

Vectors are ideal for non-photographic, flat images like icons, logos, drawings, comics, text, infographics and digital images made in Illustrator or Inkscape.

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

In the example you show use the second approach if you want to set a specific 'section' of your page content to a max-width;

 

   .pagecontent {
            max-width1200px;
            margin-left: auto;
            margin-right: auto;
            etc...................
        }
 
That then allows other content/containers to consume the maximum width of the 'body' if necessary.
 
However consider that 1200px may look very small on a large screen so maybe consider setting the max width in % percent.
 
Personally I hardly ever set width/padding/margin on the body tag.

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

to get a full width you can use 100vw as value,

.fullwidth {
    width: 100vw;
}

 more infos on https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Likes

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
Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

The reason I am using max-width in pixels, rather than %, is that I want the content to stay the same width (1200px) and only start shrinking when the screen width gets down to 1200px, I don't think I can get that behaviour using % or vw.

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

I think you're being short sighted to users with 3600px wide and higher displays.  On 4-5K monitors, 1200px looks like a postage stamp.

 

If anyone's interested, Bootstrap's full-width class is "container-fluid."   For less than full width, use the "container" class.  

 

EXAMPLE:

image.png

 

CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<style>
/**some custom styles to keep a bottom footer on short pages**/
body {
min-height: 100vh;
background: url( https://placeimg.com/1000/900/nature?t=1531616140833) no-repeat center center fixed;
background-size: cover;
}
.flex-grow { flex: 1; }
</style>
</head>

<body class="d-flex flex-column">

<header class="container-fluid bg-info text-light p-4">
<div class="row">
<div class="col">
<h1 class="text-center">Bootstrap 4.5. in Dreamweaver</h1>
</div>
</div>
</header>


<main class="container flex-grow bg-light">
<div class="row">
<div class="col m-5 p-4">
<p>Main content goes here...</p>
</div>
</div>
</main>


<footer class="container-fluid text-center bg-info text-light p-4">
<div class="row">
<div class="col">
<p>Some footer text here...</p>
</div>
</div>
</footer>

<!--First jQuery, popper, then Bootstrap JS--> 
<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>

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

quote

I think you're being short sighted to users with 3600px wide and higher displays.  On 4-5K monitors, 1200px looks like a postage stamp.

.  


By @Nancy OShea

 

Take your point. But many of our clients are already travelling abroad, using laptops, tablets or phones, with limited internet service. I have a lot of photo content, even a few videos, and can't have clients losing patience waiting for pages to download at 200kbps and less. I'm not wed to 1200px, it will probably be somewhat wider than that, perhaps 1800px.

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

Wait a minute.... bandwidth is an entirely separate problem and page width has nothing to do with it.

 

I think you're trying to put the cart ahead of the horse and that never works well.

 

Good luck!

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

quote

Wait a minute.... bandwidth is an entirely separate problem and page width has nothing to do with it.

 

I think you're trying to put the cart ahead of the horse and that never works well.

 

Good luck!

 

By @Nancy OShea

 

To fill a bigger screen, without the content and photos looking like postage-stamps,the photos need to be bigger too. If you don't want pixelated photos, that means bigger files and slower page loading, especially where you have limited bandwidth. Am I wrong?

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

quote
quote

Wait a minute.... bandwidth is an entirely separate problem and page width has nothing to do with it.

 

I think you're trying to put the cart ahead of the horse and that never works well.

 

Good luck!

 

By @Nancy OShea

 

To fill a bigger screen, without the content and photos looking like postage-stamps,the photos need to be bigger too. If you don't want pixelated photos, that means bigger files and slower page loading, especially where you have limited bandwidth. Am I wrong?


By @Galeodan

 

Well that's where image srcset comes into play, you can then serve the appropriate sized image to the appropriate device.........but I dont think a lot of developers actually do it because it takes more time to produce 3 or 4 alternative sized images of the same image for different devices, they just use a large image.

 

Some may do it for a limited amount of hero images (main images) but probably if you have dozens of smaller images it would be a nightmare to manage..........welcome to the world of the web-developer. Its not easy IF you are doing it properly.

 

srcset:

https://www.w3schools.com/tags/att_source_srcset.asp 

Likes

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
Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

Well that's where image srcset comes into play, you can then serve the appropriate sized image to the appropriate device.........but I dont think a lot of developers actually do it because it takes more time to produce 3 or 4 alternative sized images of the same image for different devices, they just use a large image.

 

 

srcset:

https://www.w3schools.com/tags/att_source_srcset.asp 


By @osgood_

True - But the issue here is not the just the device screen, it's the quality of connection to the server. What I would need is a facility to detect the bandwidth of their connection and feed the appropriate image based on screensize AND download speed. Is there an app for that?  🙂

 

Likes

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 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Dealing with images and videos is the single biggest problem which has not yet been resolved satisfactory. Until such time as browers have some native method of resizing/upscaling/downscaling images, without loss of quality, when a smaller screen is detected it will remain a thorn in the backside of most developers, which is why the majority choose to forget it.

 

The best method to date is srcset which provides the ability to serve different dimension images of the same image and different physical data, making the images optimal for the situation faced. However the pay off is managing multiple images, which gets time consuming and messy.

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

You DO NOT need to fill the screen with hi-res images and videos.  But DO aggresively optimize content for slow networks if that's your target audience.

https://css-tricks.com/optimizing-images-for-users-with-slow-network-speeds/

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
Explorer ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

I have been optimizing aggressively for years now. Not just for the users but for myself to check the served file performance as opposed to local files. But thanks for the link - Looks like it will be helpful.

 

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

BenPleysier_0-1620257530617.png

 

Having said that, if you have returning users, it may pay to have a look at PWA's.

Wappler, the only real Dreamweaver alternative.

Likes

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 05, 2021 May 05, 2021

Copy link to clipboard

Copied

Since we're discussing bandwidth now, it goes without saying that you should be serving media from co-located content distribution networks for N.America, S. America, Europe, N. Africa, S. Africa, etc...  Users in Germany will get their content much quicker from European CDNs that are closer to their physical location than they would from other parts of the globe.

 

Also consider using Lazy Load to defer objects until they're actually needed. 

https://en.wikipedia.org/wiki/Lazy_loading

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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 06, 2021 May 06, 2021

Copy link to clipboard

Copied

this one https://www.cloudflare.com/cdn/ is pretty cool...

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

quote

this one https://www.cloudflare.com/cdn/ is pretty cool...


By @B i r n o u

 

Had a quick look and it looks like it might be just the ticket for me. Although most sites are really slow to load here, YouTube is way faster than it should be and I've always suspected it's because of their widespread distribution network. Reckon I'l probably try it on one of my existing sites to see. It looks like you can use your existing host\DNS (I think).

Likes

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 06, 2021 May 06, 2021

Copy link to clipboard

Copied

LATEST

not all sites have an absolute necessity to use a DNS, everything will depend on their geographical distribution.


For my part, I work with an outsourcing team that manages the servers on which I work. Servers are mainly virtual machines, but not only, and as soon as a worldwide distribution is requested, that the access times become too unacceptable, they distribute to the DNS.

 

Of course as far as I'm concerned I only still work with the virtual machine (main host) the rest (the CDN) is in fact just a reverse proxy.


It seems to me that I understood that you would like to test this solution... CloudFlare propose a free access.

 

In order to quantify the real gains, I finally decided to place a full-scale test, the site which will be put under study is a Swedish site, therefore based on a shared server, good quality in Sweden, but with gaps in Greece, the United States, and Indonesia. So before the team switches to CDN, we take samples, and measure all the tests set up. I may keep you informed.

Likes

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