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
  • 1136 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
    BenPleysier
    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_
    Brainiac
    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
    BenPleysier
    Community Expert
    May 22, 2018

    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