Woo template

Archive
1

Before I submit an issue on github I wanted to check I did everything fine.
I started from the Woo skeleton and customized the modular home page. Modifying the ‘features’ bit makes the layout sort of crumble.
Here is my test site: I brought back the original ‘Features’ part and let the modified one ‘Expertises’ be displayed at the end (layout was the same with modular page modified to display ‘Expertises’ a the top in lieu of ‘Features’). http://776d699873.testurl.ws/woo/
Thank you

2

It’s a correct behavior. Styling is applied to sections. So for example features section has a “features” id in css. To add the same styling to your “expertises” features section, open layout.css and find following code (around line 248).

/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}
#features .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right {
   padding-left: 32px;
   float: right;   
}
#features .left {
   padding-right: 32px;
   float: left;    
}
#features h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}

Now modify it like that:

/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features, #expertises {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}
#features .feature, #expertises .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right, #expertises .right  {
   padding-left: 32px;
   float: right;   
}
#features .left, #expertises .left  {
   padding-right: 32px;
   float: left;   
}
#features h3, #expertises h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}

Of course that means that for any other non-standard layouts you have to redo above code but that can be fixed easily.

/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features, .generic_features {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}
#features .feature, .generic_features {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right, .generic_features  {
   padding-left: 32px;
   float: right;   
}
#features .left, .generic_features {
   padding-right: 32px;
   float: left;   
}
#features h3, .generic_features {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}

And then in your twig template where it says

<section id="expertises">

add

<section id="expertises" class="generic_features">

Hope i explained it a little.

3

Great, that was precisely what I had been missing!
Thx a lot Karol)