Best way to handle responsive design

Hello,

I was wondering what is the best way to handle images within the responsive deisgn?
I've got a image on the e-commmerce design that is smaller then the one in the demo; 500x524
Should I test it on all sceen sizes and edit it within the overrides.css or should I add an empty space around the image making it larger? So instead of 500x524 make it for example 600x624 (while the original image within stays at 500x524)?

Also is there somewhere documentation available about all the possibilities within the Quark E-Commerce theme? I did a manual install and imported the demo content but not everything has been imported.

For example I would also like to know how to make sure the image stays on the left so you don't see the orange on the left side, see image below.


Normally I work in Joomla so the whole Wordpress thing is kinda new for me anyways, atleast long time ago since I've worked with it.

Hello,

We are working on detailed documentation for the QUark theme.

Regarding your issue, could you sen me an URL to your website (here or via PM)? THen I"ll try to check your images and other issues.

I've checked your image on different screen sizes and it looks good, but maybe you should use an image where this eletronic device is centered (now there's more space on the left)

Do you mean the starting image? Since I think it is not big enough on all screen sizes and to close to the top, would like to have it all centered.
Also how can I make sure that the image in the orange (now blue) block stays on the left side so you always see just the image and just blue at one side (right now the image has blue background on both sides).

Try to add this custom css (if you want header image centered - undert the header text):

Code: Select all

.gk-store-header,
.gk-store-image {
  width: 100%;
  display: block;
}


and remove this code from override.css file:

Code: Select all

#gk-header-mod .gk-store-image > img {
    height: auto !important;
    width: 70% !important;
    max-width: 70% !important;
  }


regarding the blue background section - is not possible, it will be much easier to use the section "Motion is life" instead:
https://demo.gavick.com/wordpress/quark_ecommerce/

Hi thanks,

How do you mean that it is not possible? The "Intelligent Shoe" section does exactly what I want, but somehow with my image it does not center left.

It's not possible with your image, please use an image with the size similar to the default (1280 x 1090 px) and should be ok.

Is there an easy way to make everything the right size in responsive?

Right now I'm experience some real problems with all different the different resolutions. Like the iPhone, other mobiles and 1024 x 600 screens.

With only height I can't seem to get it working, so I guess I'll have to work with @media width: 1024 height: 600 and edit the entire 'gk-header-mod-wrap' for all those different screen sizes?

I've got the right alignment, size etc at this resolution 1366 x 667. I just wish there was an easier solution then the one I described above.

Is there an easy way to make everything the right size in responsive?

Right now I'm experience some real problems with all different the different resolutions. Like the iPhone, other mobiles and 1024 x 600 screens.

With only height I can't seem to get it working, so I guess I'll have to work with @media width: 1024 height: 600 and edit the entire 'gk-header-mod-wrap' for all those different screen sizes?

I've got the right alignment, size etc at this resolution 1366 x 667. I just wish there was an easier solution then the one I described above.

Also with these resolutions I'm experiencing no problems:
1280 x 800
1280 x 960
1280 x 1024
1440 x 900
1600 x 1200
1920 x 1080
1920 x 1200

Everything below that is just pure horror

Pfffff... I got it pretty good working at Chrome, but in IE, Safari and Mozilla the text screws up / or everything is too close to the menu.

Could you provide any specific issue on specific screen resolution? Then I'll be able to help, sorry but if you've changed default structure of the Quark theme, we can't provide you complete code for responsive view.

I will send you a private message with some screenshots of the issues I'm facing!

I've centered my image in a new transparant image with the sizing of your shoe 337 x 1015. That makes it a lot better already since I don't have so much shifting in height anymore on the different sizes.

Still please look at my private message, especially regarding mobile.