Grid Customization

• 

  greenoasispatrick · Member · Aug 2, 2016 at 3:23 pm

  • Copy link
  • Add topic to favorites

  I am trying to do some css customization to my grid layouts.

  The site I am working on is https://greenoasisco.wordpress.com/

  In the Results, Our Services, and Committed to you sections I want all the separate sections to have a different background but I can seem to narrow down the proper code to do it. As you can see when I try to isolate the Results section and change only the background of that section, it also changes the committed to you paragraphs. The green background isn’t the color I want its only just a filler so I can see where the color is being applied.

  Thanks

• 

  hallluke · Member · Aug 2, 2016 at 7:31 pm

  • Copy link

  You’re almost there but you can’t have spaces in class names. Instead you can have multiple classes separated by a space.

  You’d be better off changing your classes to committed_to_you and out_services and then using CSS like:

  .committed_to_you {
  	background: #f00;
  }
  .our_services {
  	background: #0f0;
  }

• 

  greenoasispatrick · Member · Aug 2, 2016 at 7:36 pm

  • Copy link

  Thank you for getting back to me. I think I have getting them different backgrounds down but how can I make the backgrounds the full width of the page? Right now they are contained to their content.

• 

  hallluke · Member · Aug 2, 2016 at 9:06 pm

  • Copy link

  That would involve removing most of the existing layout styles for those sections of your site and redoing them almost from scratch. If you really want full width backgrounds you’re better of picking a theme that offers them as standard (check out the front pages on the demo sites of Shoreditch or Affinity).

  I’m not saying it can’t be done, but it wouldn’t be easy and it’s much more likely to cause complications for other pages/sections of your site, especially when you then think about tablet and mobile responsive layouts too.