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.
yes you can change the position of the menu, but in order to get it done you will need to change also some properties of the slider and probably the logo.
First of all, position the menu where you want it, but you have to do that via ".main-slider-menu" class name to ensure your changes will apply only where the slider is present. You don't want your changes to apply to all pages because the layout is different on pages with no slider on it.
Set the position of the menu to "absolute", and set the "top" property to a value that works for you (depending on how tall is the content you have above the slider). Set the "left" property to 50% and set a negative left margin which have to be half of the width of the menu in order to place the menu in the center of the page (if your menu is 980px, the left margin should be -490px).
At this point you should have you menu positioned where you want it. Now you have to change the bottom margin of your slider from -45px (which works for the old placement of the menu) to say 20px; This way you will prevent content overlapping below your slider.
If you need to change the position of your logo (and most probably you will), do it via ".main-slider-header" class name - increase the top margin to a value that works for you. This is because you will want to change the logo offset only if the slider is present.
Remember that these guidelines are for desktop resolutions. But doing the same thing on mobile devices will be similar.
I hope this will be helpful.
there is no problem to change vertical offsets in order to fix your issue, but do your changes only in 980.css, this way the changes will apply only to desktop resolutions, and will not be present on smaller screen widths where elements' design is different.
Also thank you for your feedback, we agree the titles spacing can be improved so we are going to fix this in the theme.