Skip to main content
Galeodan
Galeodan
Known Participant
May 5, 2021
Question

How do I control varying page content width?

  • May 5, 2021
  • 3 replies
  • 2443 views

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:

If I set a reduced body width, 

        body {
            max-width: 1200px;
            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-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            etc...................
        }

 

    This topic has been closed for replies.

    3 replies

    B i r n o u
    B i r n o u
    Legend
    May 5, 2021

    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

    Galeodan
    GaleodanAuthor
    Known Participant
    May 5, 2021

    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.

    B i r n o u
    B i r n o u
    Legend
    May 7, 2021
    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).


    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.

    O
    osgood_
    Legend
    May 5, 2021

    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-width: 1200px;
                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.
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      May 5, 2021

      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.

       

       

      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
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices