Switching a section to full width

1 reply·opened Jan 31, 2018
A
AntonymtdJan 31, 2018

Hi,

My content is wrapped within wrapper, content, content-wrap and finally container clearfix. What I'm trying to do is switch a part of the code out of these wrappers in order to have it full-width. The problem is that when I do this, it either doesn't work properly no matter how much I try to mess with css, or the top slider is being stretched down through all the content for some reason. (I used the index-wedding as a starting point for this page).

For example, I'm trying to make the container with images/lyon.jpg full-width as well as the google map, but not the rest.

Here's part of the code :

    <section id="content">

        <div class="content-wrap">

            <div class="container clearfix">

                <div id="section-location" class="heading-block center topmargin page-section">
                    <h2>Le Lieu</h2>
                </div>

                <blockquote class="quote">
                    <p class="quote-text">Capitale des Gaules...</p>
                </blockquote>

                <div class="container" style="padding-left: 0; padding-right: 0; margin-bottom: 40px">
                    <img src="images/lyon.jpg" style="max-width: 97%; margin-left:auto; margin-right:auto">
                    <div class="centeredover overtitle">LYON</div>
                </div>

                <blockquote class="quote blockquote-reverse nobottommargin">
                    <p class="quote-text">... Berceau de l'EDARA.</p>
                </blockquote>

                <div style="margin-top: 30px">
                    <div class="titlelocation">Complexe sportif de La Doua</div>
                    <div class="center"><em>18 Rue des sciences, 69100 Villeurbanne</em></div>
                    <div id="google-map1" style="height: 300px; margin-top: 30px" class="gmap"></div>
                </div>

                <p>much design, wow, much design, go elit! oh my text, very design. very design. such sit! so swag. very word, such ipsum, so swag. much aenean. many amet, plz word, much aenean. much full! wow! very lorem. very consectetur, go full. wow, so full! much layout. plz swag! wow! much adipiscing! i can haz design. wow. very swag. need doge! wow, want doge! much full! such text! very consectetur, oh my text. oh my text, wow! very design. very swag. oh my text. go elit! rate me, many layout, i iz cute?. i iz cute?! much design, want doge! wow. oh my mattis!</p>
            </div>
        </div>
    </section><!-- #content end -->

Any idea ?

Best regards
Antony.

S
SemiColonWebSTAFFFeb 7, 2018

Hello,

  1. Do not use a .container DIV inside another .container DIV.

  2. Simply close the .container DIV and place your contents outside (which you want to be Full Width) and then open the .container DIV again. Example:

<section id="content">

	<div class="content-wrap">

		<div class="container clearfix">

			<div id="section-location" class="heading-block center topmargin page-section">
				<h2>Le Lieu</h2>
			</div>

			<blockquote class="quote">
				<p class="quote-text">Capitale des Gaules...</p>
			</blockquote>

		</div>

		<div class="container-fluid" style="padding-left: 0; padding-right: 0; margin-bottom: 40px">
			<img src="images/lyon.jpg">
			<div class="centeredover overtitle">LYON</div>
		</div>

		<div class="container clearfix">

			<blockquote class="quote blockquote-reverse nobottommargin">
				<p class="quote-text">... Berceau de l'EDARA.</p>
			</blockquote>

			<div style="margin-top: 30px">
				<div class="titlelocation">Complexe sportif de La Doua</div>
				<div class="center"><em>18 Rue des sciences, 69100 Villeurbanne</em></div>
				<div id="google-map1" style="height: 300px; margin-top: 30px" class="gmap"></div>
			</div>

			<p>much design, wow, much design, go elit! oh my text, very design. very design. such sit! so swag. very word, such ipsum, so swag. much aenean. many amet, plz word, much aenean. much full! wow! very lorem. very consectetur, go full. wow, so full! much layout. plz swag! wow! much adipiscing! i can haz design. wow. very swag. need doge! wow, want doge! much full! such text! very consectetur, oh my text. oh my text, wow! very design. very swag. oh my text. go elit! rate me, many layout, i iz cute?. i iz cute?! much design, want doge! wow. oh my mattis!</p>
		</div>
	</div>
</section><!-- #content end -->

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard