Responsive grid framework in Backlight

Ken · 2016-07-22 01:37:08

I used Rod's code to create a two column text layout. The only issue I see is that the two columns do not cover the width of my website. The left column/photo is indented and the right column has a lot of space on its right side.

here is the link to the page that uses two column code:

http://sweetlightgallery.com/test/photographer/

Any suggestions on how I can correct this?

Daniel Leu · 2016-07-22 01:47:34

Do you have the three column layout enabled?

rod barbee · 2016-07-22 01:50:05

looks like you've got a tray active with no content in it. Try setting your page template to the one-column layout.

The page is looking good.

Ken · 2016-07-22 02:03:22

I set the page template to a one-column layout, which helps the text occupy the entire page, but it is still indented in from the sides. Any thoughts on how to correct this?

Daniel Leu · 2016-07-22 02:17:12

Now it is a matter of your css settings. Here I remove the default paddings and add a new one to get some distance between the two columns:

.the__copy {
    padding: 0; 
}

@media screen and (min-width: 992px) {
  .grid_12 *[class*="col_"] {
      padding-right: 0;
      padding-left: 0;
  }
  .col_4 {
      padding-left: 24px;
  }
  .col_8 {
      padding-right: 24px;
  }
}

rod barbee · 2016-07-22 02:37:51

The responsive grid has alpha and omega classes that will negate the built in padding on the left (alpha) and right (omega)
Apply the alpha class to the first block and the omega class to the second.
See my demo page for examples: http://backlight-rb-test.barbeephoto.co … e-grid.php

And there are some other classes you can use. I outline some here:
http://ttg-tips-and-tricks.barbeephoto. … backlight/

Ken · 2016-07-22 02:55:36

adding the alpha and the omega worked. A few more tweaks and I am ready to install cart.

Thanks Rod and Daniel for all of your help.

rod barbee · 2016-07-22 03:57:45

The Push and Pull classes are handy too.
Say that on the desktop you want certain content on the left and other content on the right, but you want the content on the right to end up above the content on the left when the site is used on mobile devices.
http://backlight-rb-test.barbeephoto.com/push-pull.php

Community @ The Turning Gate

#1 2016-07-22 01:37:08

Responsive grid framework in Backlight

#2 2016-07-22 01:47:34

Re: Responsive grid framework in Backlight

#3 2016-07-22 01:50:05

Re: Responsive grid framework in Backlight

#4 2016-07-22 02:03:22

Re: Responsive grid framework in Backlight

#5 2016-07-22 02:17:12

Re: Responsive grid framework in Backlight

#6 2016-07-22 02:37:51

Re: Responsive grid framework in Backlight

#7 2016-07-22 02:55:36

Re: Responsive grid framework in Backlight

#8 2016-07-22 03:57:45

Re: Responsive grid framework in Backlight

Board footer