need this section to span edge to edge

Report · May 21, 2018

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>

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 {

margin: 0 auto;
max-width: 100% !important;

}

Report · May 21, 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, the only real Dreamweaver alternative.

Report · 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.

Report · May 22, 2018

Wappler, the only real Dreamweaver alternative.

Report · May 22, 2018

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

<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:

<h1>My Heading</h1>

</div>

Report · May 22, 2018

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, the only real Dreamweaver alternative.

Report · May 22, 2018

BenPleysier wrote
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.

Have they changed it recently. I'm sure I used to get yacked at if I didnt include some kind of h1-h6 directly after the <section> tag. At one point it was almost driving me nuts as I thought it was stupid but it appears you can have a heading in any child container. Then maybe I was including the section tag without a including a heading in any of the child containers!

BenPleysier wrote
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">

Sure a fluid container would be the best solution but the code we were discussing used a container <div>

For sure we dont really know what the OP is using a container, fluid container or even if by section they really mean a html 5 section or just a section of code.....the info is too diluted to provide any real solution

Report · May 22, 2018

At one point it was almost driving me nuts as I thought it was stupid but it appears you can have a heading in any child container.

Join the club. Turning 75 next week and the crew think they are getting to go to a party.

Wappler, the only real Dreamweaver alternative.

Report · May 23, 2018

BenPleysier wrote
At one point it was almost driving me nuts as I thought it was stupid but it appears you can have a heading in any child container.
Join the club. Turning 75 next week and the crew think they are getting to go to a party.

Congrates.......hope I'm well out of it and sitting by a river with a cold beer watching the world go around by time I reach 75.

Sometimes I think hey this block of code would be good to wrap in a section tag, it might not necessarily warrant having a header tag and that's were it blows up. Not sure it is always necessary, or should always be necessary, to include a header tag within a section tag without getting a validation warning, but I don't make the rules up.

Adobe Community

need this section to span edge to edge