In the original Agency Theme, each section alternates a full width background color.

In your Drupal Bootstrap Agency Theme you can certainly create blocks that will emulate these sections but, none of them alternate in background color and, if you try to integrate a background color on any of these blocks, it won't expand to the full width of the page like the Page Splash or, Contact blocks.

Is there a step that isn't documented here we would need to follow in order to produce this full-width feature or, are we left to do what we can with content-width blocks?

CommentFileSizeAuthor
#6 Capture d’écran 2017-12-19 à 22.55.53.png3.89 MBfredfab
full_vs_content.png101.23 KBdanielgeez

Comments

danielgeez created an issue. See original summary.

jcnventura’s picture

jcnventura
Primary language English
commented

Yes, this is something that I couldn't solve without breaking the base Bootstrap theme.. If you find a way, I'd be happy to integrate it in the module.

penone’s picture

penone commented

Curious...why not just add some css?

What I did was the following:

  1. Create a customs.css file
  2. Add stylesheets[all][] = css/custom.cssto the INFO file under stylesheets
  3. In the custom.css file I added the following css
    .container-fluid {
	padding-left: 0px;
	padding-right: 0px;
}
  4. Clear cache

That worked for me and as of now no issues - although just started playing with this theme.

danielgeez’s picture

danielgeez commented

Thank you for the suggestion but, #3 did not work for me. Followed all steps and no luck at all.

Would you be able to upload screenshots of your successful full-width blocks in action? I may be missing something but, In the latest build of this theme, ".container-fluid" is not a part of the CSS class for a block.

Example:

<section id="block-views" class="block block-views contextual-links-region">CONTENT</section>

b4pq-llc’s picture

b4pq-llc commented

Under appearance/settings for the theme choose none for CDN provider for loading bootstrap CSS. That gave me full width blocks.

fredfab’s picture

fredfab commented
StatusFileSize
new Capture d’écran 2017-12-19 à 22.55.53.png3.89 MB

I've find a CSS trick that work perfectly from this website: css-tricks.com

In my CSS i had a class named "fullwidth-block" with these parameters :

 .fullwidth-block {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  }

Just apply this class at the sections you want to be full-with and It work like a charm.
If you only want the background color to be full-with, apply the class "fullwidth-block" to the section, and apply the class "container" at the div inside this section.

<!-- Portfolio Grid -->
    <section class="bg-light-gray fullwidth-block" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
          ...
jcnventura’s picture

jcnventura
Primary language English
commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.