Complex full width grid

Question

How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?

I was thinking about creating a new container.

.container--full { max-width: 1400px; width: 100%; }

My .container grid has a max-width of 1170px. So my new container is wider than .container.

And then set a background-image, position left and background color grey. Inside that .container--full, create .container

<div class="container--full">
    <div class="container">

    </div>
</div>

Test with container-fluid.

 <div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">

    <div class="container">

            <div class="col-sm-3">

                    <div class="info">
                        President
                    </div>
            </div>

            <div class="col-sm-9">

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.

            </div>

    </div>


</div>

CSS

.commission-business {
.container-fluid {
    background-color: $grey--lighter;
    background-position: left top;
    background-repeat: no-repeat;
}

.info {
    background: red;
    display: block;
    padding: 1rem 2rem;
}
}

Possible duplicate - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Oct 31 '18 at 14:42
add custom class to col-sm-3 and assign this style="background-image: url('/images/commission-header.png');" to new class and do background-size:cover or 100% so it will fit col-sm-3 — Varsha Dhadge, Oct 31 '18 at 14:55
using container-fluid is recommended instead of creating another one — Varsha Dhadge, Oct 31 '18 at 14:56

score 0 · Answer 1 · answered Oct 31 '18 at 14:25

0

Just use bootstraps 'container-fluid' class. (learn more)

<div class="container-fluid">
    <div class="row>
        ... 
    </div>
</div>

answered Oct 31 '18 at 14:25

jsadev.net

2,800
1
16
28

Yes I know the container-fluid class. But how text block in the first column can't be aligned correctly this way. See new screenshot in question above. – Dennis Oct 31 '18 at 14:35

Complex full width grid

1 Answers1