Jump to content


resolved

Products In Rows On Store Page Not Showing Correctly

customize store page

6 replies to this topic

#1 jblortz

jblortz

    New Member

  • Members
  • Others: All Plugins, Builder, Exchange - Stripe
  • 6 posts

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.

#2 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,440 posts
  • LocationOklahoma City, OK

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

#3 jblortz

jblortz

    New Member

  • Members
  • Others: All Plugins, Builder, Exchange - Stripe
  • 6 posts

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!

#4 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

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

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#5 jblortz

jblortz

    New Member

  • Members
  • Others: All Plugins, Builder, Exchange - Stripe
  • 6 posts

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

#6 Craig Brissell

Craig Brissell

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 196 posts
  • LocationCape Cod, MA

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.

#7 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,440 posts
  • LocationOklahoma City, OK

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



Reply to this Topic


ATTENTION
If this topic is marked RESOLVED or INFORMATION, or if you are NOT experiencing EXACTLY the same issue, please start a new topic to provide the details of your problem. If the solution provided doesn't work for you, you should start a new topic. If you feel this thread contains relevant information, you may include a link to it in your new topic. To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. When posting your question or request on the forum, please be as concise and specific as possible. The shorter and more to the point you can make your request, the better.

For BackupBuddy related issues, be sure to include the status log from your most recent backup.

CLICK HERE to start a new topic in the Exchange ecommerce plugin forum.


  



Also tagged with one or more of these keywords: resolved, customize store page

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users