Can't get 4 columns on HP

[tblogster]

Hi,
I’m trying to use the Genesis Featured Page widget to get 4 columns of featured pages of the homepage.
I have selected img-4-columns however it doesn’t seem to work and my pages are stacked in two columns.
You can see them on the homepage below the big banner here:
http://ipaintbynumber.com/
Please guide me as to how I can fix this
Thanks!

[Chinmoy Paul]

You need to modify the style.css file. Replace this existing CSS

.one-third,
.two-sixths,
.home-middle .featuredpage {
    width: 31.623931623931625%;
}

BY

.one-third,
.two-sixths {
    width: 31.623931623931625%;
}

Now you will replace this one

.one-fourth {
    width: 23.076923076923077%;
}

By

.one-fourth,
.home-middle .featuredpage {
    width: 23.076923076923077%;
}

=====================

Add this new CSS in your style.css file

#featured-page-3 {
clear: both;
margin-left: 0;
}

[tblogster]

that worked thanks!

[tblogster]

Having the same problem with a second row of featured pages on the same homepage. is this going to happen every time?
How can I fix in this case?
thanks

[Chinmoy Paul]

Remove this CSS

#featured-page-8 {
    clear: both;
    margin-left: 0;
}

Replace current CSS

#featured-page-3 {
clear: both;
margin-left: 0;
}

By

#featured-page-3,
#featured-page-11 {
   clear: both;
   margin-left: 0;
}

[gali]

I’m having the same problem and tried as you said but still not working for me. Can you please check it here http://cheers-2-wine.com

Thanks

[Chinmoy Paul]

This is for @gali

Replace this CSS

.first, 
.home-middle .featuredpage:nth-of-type(3n+1) {
    clear: both;
    margin-left: 0;
}

WITH

.first,
.home-middle .featuredpage:nth-of-type(4n+2) {
    clear: both;
    margin-left: 0;
}

[gali]

Yes! thanks so much – it works great now. 🙂

[tblogster]

those four columns are still not arranging themselves properly for me. any tips?

[Chinmoy Paul]

@tblogster

Remove the following css from style.css file

#featured-page-3, #featured-page-11 {
    clear: both;
    margin-left: 0;
}

========================

Now replace the following CSS

.first, 
.home-middle .featuredpage:nth-of-type(2) {
    clear: both;
    margin-left: 0;
}

with

.first, 
.home-middle .featuredpage:nth-of-type(4n+2) {
    clear: both;
    margin-left: 0;
}

• This reply was modified 6 years, 9 months ago by Chinmoy Paul.

[tblogster]

closer but still not quite right.
see here;
http://ipaintbynumber.com/

[Chinmoy Paul]

You did not properly follow my instruction.

Replace (line no 2783 )

.home-middle .featuredpage:nth-of-type(4n+3) {
    clear: both;
    margin-left: 0;
}

WITH

first,
.home-middle .featuredpage:nth-of-type(4n+3) {
    clear: both;
    margin-left: 0;
}

Remove this CSS (line no 711)

.first, .home-middle .featuredpage:nth-of-type(2) {
    clear: both;
    margin-left: 0;
}

[tblogster]

unfortunately that did not help.
please review.
thanks for your patience.

[tblogster]

the site is almost finished and then this problem suddenly started happening again.
see here
http://ipaintbynumber.com/
please help
thanks!

[Chinmoy Paul]

Replace this CSS

first,
.home-middle .featuredpage:nth-of-type(4n+3) {
    clear: both;
    margin-left: 0;
}

WITH this

first,
.home-middle .featuredpage:nth-of-type(4n+2) {
    clear: both;
    margin-left: 0;
}

[Author]

Posts