Jump to content


Replying to Products In Rows On Store Page Not Showing Correctly


Post Options

  or Cancel


Topic Summary

Elise Alley

Posted 28 May 2014 - 01:06 PM

Hi Craig,

I've already responded to this on your original post:  http://ithemes.com/forum/topic/61001-exchange-product-page-design/

Please post there if you have any additional questions.

Thanks,

Elise

craigbrissell

Posted 28 May 2014 - 01:05 PM

I have same issue and your coding helped out.... I just need the code to space the items correctly. For Example: http://alibixclothing.com/store/ has no space between the second and third product. Any Suggestions?? Thanks in Advance.

jblortz

Posted 24 April 2014 - 04:42 PM

Ronald and Elise...
That did the trick!!!  And was able to experiment with different product numbers per row and sizes, with everything working.

Can't thank you enough....
John Lortz

Ronald

Posted 24 April 2014 - 02:58 PM

Hi,

can you try replacing all added code with (for 5 products per row):

#it-exchange-store .it-exchange-products li {
	margin: 0 !important;
	padding: 0 !important;
	width: 20% !important;
	clear: none !important;
}

#it-exchange-store .it-exchange-products li:nth-child(5n+1) {
	clear: left !important;
}

you can change the width to 25% and the child selector to 4n for 4 products in a row,

Ronald

jblortz

Posted 24 April 2014 - 12:48 PM

Hi Elise...
I made the changes you suggested, and the items did begin appearing correctly with 2 per row.

However, when I changed the code from

nth-child(2n+1)
to    
nth-child(3n+1)

there continued to be only two items per row, and we are again back at inconsistency with 1 or 2 items per row.

Here is the changed page...

http://catalog.discoverskills.com/discoverskills-learning-store/

Perhaps it will help to know that my goal is to have 4 or 5 item-wide rows.

Sorry that I know just enough CSS to mess around and be dangerous!

Elise Alley

Posted 24 April 2014 - 10:38 AM

Hi jblortz,

It looks like you've added some code:

#it-exchange-store .it-exchange-products li:nth-child(2n+1) {
margin-right: 5%;
clear: both;
}

The "clear:both;" is being overridden.  When I added !important;, everything lined up correctly in 2 columns.  Looks like you have code later in your stylesheet that overwrites it.  


.it-exchange-product {
width: 25% !important;
float: left !important;
clear: none !important;
}

So, if you remove that last clear:none !important; you won't have to add the !important to the previous declaration.  

If you want it to be 3 columns, I changed nth-child(2n+1) to nth-child(3n+1).

Give that a try and let us know how it goes.  

Thanks,

Elise

jblortz

Posted 24 April 2014 - 07:53 AM

In searching through the forum, I found the posts regarding image size and formatting on the Store page (thanks for those posts) but I'm now having an issue I can't figure out.

After sizing the text and images, the rows of items on the store page are now inconsistent.

Here is a link...

http://catalog.discoverskills.com/discoverskills-learning-store/

Some rows have 3 items, then just 1 item, etc.  I've tested in Chrome, IE, Firefox and see the same thing.

I've attempted changing the size of the product image and DIV area, but even when I go to 4 or 5 items on a row (via changing the size), it will still include rows where there is only 1 item.

Any help/guidance would be appreciated.

Review the complete topic (launches new window)