k2store resized view

siteview.jpg

I have the bikestore with k2store (joomla 3) and setup in three columns just to look more like virtuemart, but when i resize the browser i experience what you see in the photo.Is there anyway to make items go to the next line when they reach that size (mobile view)?

Could You please post an url to your site?

Thank you for the quick response. I have just uploaded the website so i'll give you the URL. It's www.rinatgreece.gr .
There is a general problem on how to put the products.if a title is more than 1 line the photo goes i line down and meshes the whole view.

Please edit: /templates/gk_bikestore/css/override.css and add at its end:

Code: Select all

@media (max-width: 1100px) {
    #k2Container header h2 {
        font-size: 28px;
    }
}

@media (max-width: 900px) {
    #k2Container header h2 {
        font-size: 20px;
    }
}

@media (max-width: 500px) {
    #k2Container header h2 {
        font-size: 16px;
    }
}


What id does- it changes font size when screen is less than 1100px, 900px and 500px - you can adjust the steps, add your own and modify font size to your taste.
Remember to enable "CSS override" in template settings - advanced section.

I'm sorry but this doesn't fix the problem entirely. This changes the headers but the real problem is when the resize gets to mobile view. I 'd like to have something exactly like what happens in the menu of the template on K2->Latest items (two columns) of the demo template , where the items don't squeeze each other, but move to the next line.

You might try adding this code:

Code: Select all

@media  (max-width: 840px) {
  #k2Container .itemList #itemListLeading .itemContainer {   
    width: 50% !important;
  }
}


This was really helpful!Thanks alot!

No problem,
If You will have any other questions, feel free to post new forum threads.