X-Cart forums

[Iggy]

hello, we are just starting to learn and experiment some with the software...

i have been able to do alot in custom css, but one thing i want to know how to do is changing the display for different sized screens...

for example, when experimenting with a top/bottom template style....smaller displays will automatically change 1,2,3 products per row depending for the screen size....perfect, they even change what size the tiles are...but when you go up to larger sizes display screens, it remains 4 wide and same sizing...this is where i wish it to be 5 product tiles wide...changing the size of the product tiles or background containers fails to accomplish this, they only crowd left leaving a blank space on the right...

i can do well with custom css but the template edit parts are still some confusing to me... this seems preety basic tho i hoped someone can just help for this one?

[totaltec]

Iggy,
This should be simple enough, just a media query with a different percentage width. If you provide a link to the site we can inspect your CSS and give advice.

[Iggy]

well, i tried that a bit ya...i assume thats a part of the solution, but the problem i had was that it simply made the product tiles bigger or smaller and didnt change the grid layout for the largest size screens...so far its pretty stock installation, there are a couple different sites but i didnt learn about the test site policy/procedure yet either....was just going to ask of that too
one is a free lic, one is business lic btw...


edit: oh if it makes a better picture it has categories hidden, its as if only featured products headline the page on a top bottom template style

[totaltec]

See not everybody is rocking your setup, that is never the case. What template are you using? What page layout? 1 column? 3 columns?

[totaltec]

So! Here we go:
The nth child of the list is being cleared. Consider this CSS:

@media (min-width: 1200px) {
  .no-sidebars ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell {
    clear: none;
  }
  .no-sidebars ul.products-grid.grid-list li.product-cell {
    width: 20%;
  }
}

See the ".no-sidebars" in the class definition? That is crucial to work on single column layouts.

-Mike

[Iggy]

perfectly....thank you very much

[Iggy]

oh...hmm...i maybe spoke to soon...i change one little detail, like length of a product title, and now the grid spacing is off, and worse, the hover function i added juggles the row below it around which is no good...

heres a test link u can see what im trying to do...
http://www.smokebomb.online/xcart/

see its 5 tiles wide is nice, and a hover effect to make them bigger...but when i hover the long product tile see what it does to the second row...

so 2 things i guess...

id like the grid to be more even vertically, and also the second row to remain in a fixed position...

[cflsystems]

This will take more than just a simple css change with width. The reason you have this effect now is the block heights are different. You have to either make them all the same or close every row before next one starts. But if you do this you cannot have 5 in a row as this will fore 2 on 3 products on some screen sizes.
Easiest to make height on all product blocks the same but them you will face some of them having too much empty space

[Iggy]

yes i was wondering to try this some...but wasnt sure the best way...generally our titles wont be longer than 3-4 rows on the product tiles...perhaps the titles could be vertically centered so shorter ones look less wierd?

thank you all for the helps

[Iggy]

ok, so i notice someone else also bring this up and i try the solution offered in that topic

/*product tile evener*/
.products-grid li.product-cell .product {
min-height: 450px;}
/*product tile evener*/

tiles even, halfway there!

the other issue is still persisting...it is because i have increased images sizes from default 160 to 300, to allow a larger hover zoom effect.....which still makes the second row juggle around...anyone know how i can lock those down?
i updated the code on the link to the test site so you can easily verify...