Skip to main content
R
r_tist
Inspiring
May 22, 2018
Question

need this section to span edge to edge

  • May 22, 2018
  • 1 reply
  • 1138 views

I would like a section to span edge to edge, however, the content within can stay in the main content standard area. It is the background cover image in this section I'd like to see fill that space. Currently it comes to a halt and won't exceed stnd content area.

<div class="col-md-12 col-sm-12 col-xs-12">

<div id="content" class="content my-clearfix">

<div id="main">

<div class="the-modules-section"></div>

<div class="the-modules-section screenFull sectionBlock" style="background-image:url();background:url(http://#); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;"></div>

</div>

</div>

</div>

Not sure how I need to rearrange things, or if it really is just a matter of working with the styles to solve the problem?

Tried this - does not seem to have an affect.

.mainOptionBlocks {
  1.    margin: 0 auto;
  2.    max-width: 100% !important;

}

    This topic has been closed for replies.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 22, 2018

    Copy and paste the following code into a new document and view in browser.

    <!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      </head>
      <body class="bg-warning">
        <section class="text-light bg-dark">
          <div class="container">
            <div class="row">
              <div class="col">
                <h1>My Heading</h1>
                <p>Some text</p>
              </div>
            </div>
          </div>
        </section>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
      </body></html>

    Explanation:

    • the example uses the latest version of Bootstrap
    • Bootstrap grid follows the following hierarchy:
      • container (fixed/fluid)
      • row
      • column(s)
    • in the example, the container is wrapped in a section which, by default, stretches across the available width - in this case, the width of the body. A background colour ensures that the section is visible.

    The result:

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    O
    osgood_
    Legend
    May 22, 2018

    Wrapping anything in a section tag WITHOUT a heading tag following it wont validate correctly, you'll get a warning to consider using a heading tag. Personally I think that is completely stupid but I try and avoid using the section tag in those senarios. Wrapping the container in a <div> tag will probably work and you wont get the validator warning.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 22, 2018

    It wont validate 'fully' unless the header is immediatley following the section tag:

    <section class="blah">

    <h1>My Heading</h1>

    </section>

    If you use the max-width Bootstrap 4 utilitiy class on the container it will make it span the whole width, no need to wrap it in a sevction tag:

    <body class="bg-warning"> 

    <div class="container mw-100">

    <div class="row"> 

    <div class="col text-light bg-dark"> 

    <h1>My Heading</h1> 

    <p>Some text</p> 

    </div> 

    </div> 

    </div>


    osgood_  wrote

    It wont validate 'fully' unless the header is immediatley following the section tag:

    Have you tried using The W3C Markup Validation Service on my code? I think you will find that there are some warnings that I would not have had if I had taken more care. But you will not find a validation error.

    Having said that, the reason that I used a section in the example is because the OP mentioned a section. I hindsight, a div element would  have been more appropriate. I guess we could all find fault with each other's coding. For instance, when I see

    <div class="container mw-100">

    I immediately think of

    <div class="container-fluid">
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices