Georgia Lou Studios

Welcome to the Help Center!

Full-width grid layout display in 3 columns | Kiersten


By default, the full-width grid layout will have your grid items display in 2 columns. If you'd like to have them instead display in 3 columns, it's a very simple process of copying and pasting some code.

Navigate to WordPress Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following:

@media only screen and (min-width: 943px){
#main.fullwidth .qb-grid > li {width: 340px; margin-right: 26px;}
#main.fullwidth .qb-grid li:nth-of-type(2n+2) {margin-right: 26px;}
#main.fullwidth .qb-grid li:nth-of-type(3n+3) {margin-right: 0;}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
#main.fullwidth .qb-grid >li {width: 293px;}
@media only screen and (max-width: 960px) {
#main.fullwidth .qb-grid li:nth-of-type(3n+3) {margin-right: 26px;}
#main.fullwidth .qb-grid li:nth-of-type(2n+2) {margin-right: 0;}

Be sure to save changes within your Customizer section when finished.

If the changes are not immediately taking effect, please also ensure that you clear any browser or WordPress cache tool you may have enabled.

Was this article helpful?
0 out of 0 found this helpful


Powered by Zendesk