Customization: 4 products on desktop and 2 products in mobile, login page

Hi Guys! I bought smart template week ago, but  unfortunately now i need to change few things. The biggest one (how i think) is change on product list. I want show 4 products in grid (not 3 how is in template), and 2 products in line (on mobile version).
Maybe someone from you can help me and tell, how should i start do this? How to start change it? Maybe someone know standards of mobile resolution? or tell me how should I start change it?

Next question: is somewhere one place where can i change main color of template?

Thx!

Hi there,

on your question about changing the main color of the theme - you can do this in the settings of the theme plugin (admin --> plugins --> Nop SmartTheme Plugin --> settings).

As for rearranging the number of the products per line, it is optimally set on mobile resolutions and is not recommended to change it. It goes as follows:

0 to 480px  -->  1 product per line
481px to 768px  -->  2 products per line
769px and above  -->  3 products per line

I can help you to change your product grid to have 4 products per line for screen resolutions above 1280px (below 1280 you don't have enough space to have 4 products per line). Just go to the end of your 980.css file and find this piece of code:


@media all and (min-width: 1280px) {

...
...
...

}


Inside the outer brackets (for example just before the closing bracket), paste this new code:

.item-box {
  margin: 0 0.5% 30px;
    width: 24%;
}
.item-box:nth-child(3n+1) {
  clear: none;
}
.item-box:nth-child(4n+1) {
  clear: both;
}


This will change your product grid to have 4 items per line on screens of 1280px or bigger. It will also change your sub-category grid in the same way.

I hope this helps.
Best regards

Hi Hristo, thanks for answer :) Now I'm thinking about mobile version is there any chance to change to display 2 products in grid/line?
I want do something like a here:  http://www.iwantoneofthose.com/home-garden/kitchen/kitchen-appliances.list I think this is really good solution. When we have only one product "in line" clients can be tired taps screen so many times to scroll all products. Maybe is possible to rescale item box/image for mobile version?
Do you even try to do this somewhere and maybe knows troubles with this solution?

Best regards, Kuba.

I have one more question about change main color. I want change it for my own color is there easy way to change it? or i need to change it everywhere? :(

Hi Hristo, thanks for answer :) Now I'm thinking about mobile version is there any chance to change to display 2 products in grid/line?

1. I want do something like a here:  http://www.iwantoneofthose.com/home-garden/kitchen/kitchen-appliances.list I think this is really good solution. When we have only one product "in line" clients can be tired taps screen so many times to scroll all products. Maybe is possible to rescale item box/image for mobile version? 
Do you even try to do this somewhere and maybe knows troubles with this solution? 

2. I have one more question about change main color. I want change it for my own color, in plugin settings I have only this default? Maybe you know easy way to change it everywhere or i need do this in all css? I have same question about buttons and color of price's?

3. I have same question like 2. - about buttons (I want little change it) and color of prices?

Hi again,

the theme is already set (by default) to display 2 items per row on mobile devices, starting from 481px. I guess you are testing your site on a smartphone with screenwidth of 480px so you are seeing the previous layout (1 item per row).
What you should do is to go to your 480.css file and to change this code:

@media all and (min-width: 481px)

to @media all and (min-width: 480px)

This way you will be able to see 2 products per row.
Keep in mind you'll have to check the css files of your plugins too and do the same thing - changing the "481px" media query value (if found) to "480px".

As for changing the main theme color to a custom color that is not predefined, you have to do it manually, there is no other way.

Hi again! i have one more question maybe you can help me.

I want create something like you have here: 
https://www.nop-templates.com/login?ReturnUrl=%2fcheckout 

In one line returning and new customer. 

Maybe you can help me, how should I change CSS to do this responsive?

Hi,
you need to add this code to your 980.css file if you want the changes to apply to devices with screen widths larger than 1000px, or to your 768.css file if you want the changes to apply to devices with screen widths larger than 768px. Do not add the code to styles.css or 480.css because there is not enough space on smaller mobile devices to keep both customer blocks on a single line.

Here is the code:

.customer-blocks {
  margin: 0 0 30px;
  overflow: hidden;
}
.returning-wrapper {
  float: left;
  width: 46%;
  margin: 0 2%;
}
.new-wrapper {
  float: right;
  width: 46%;
  margin: 0 2%;
}

Thx! I do this by myself but your solutions is better :)

Thx!