Too big images on the tablet

Hello,

My slider image is 2200 x 700px. But in my computer it goes right, at the others and tablets the image is too big and to the right side..

http://gyazo.com/212a835ee216543c72a6b0dd61b74e87

Hello,

Please check this thread:
https://www.gavick.com/forums/storefron ... 37044.html

Hello,

I followed the other post but I cant fix that for me..
The problem is that the image looks great for me but in other resolutions (other friend's computer) it looks to big.
I need to set something to auto-size the image for resolutions..

Heres the page: http://www.marcosleite.net/spirit/

You can add this code to center your slider:

Code: Select all

.gk-is-wrapper-gk-storefront .gk-is-slide {
background-size: contain;
left: 50%;
margin-left: -640px;
}


Use another values for tablets/mobiles.

Hello,

The image still not centered.. http://www.marcosleite.net/spirit/
I want the full size of the image 2048 × 645px centered in all devices and any window size..

Forget the size, Its ok right now. But, how i can change for tablet and phone?

If you size the window to small, the image goes to the left and resize.

what can I do for it?

Try to add this code into override.css file:

Code: Select all

@media (max-width: 1270px) {
  .gk-is-wrapper-gk-storefront .gk-is-slide {
    background-size: contain;
    position: static;
    margin-left: 0;
    width: 100%!important;
    max-width: 100%;
  }
}

@media (max-width: 1040px) {
  .gk-is-wrapper-gk-storefront .gk-is-slide {
    background-size: cover;
  }
}


This slider is not for background texts or logos, it was designed for the background only - texts you can add using html structure inside the page which contain the slides.

It looks better now. But in my computer the image is ok, but in another window resolution the image is "cutted" on top.

https://fbcdn-sphotos-h-a.akamaihd.net/ ... b7737f0afe

As u can see, the SPIRIT logo on top of the image is cutted..

Can you help me with that?

Try to add also this code:

Code: Select all

.gk-is-wrapper-gk-storefront {
  margin-top: 44px;
}



Added but it dont change anything.. :\

I think I solved the problem, I changed the text position a bit down and it looks fine now.

Other question:

How can I remove the small product zoom? when u go to Shop the products display a little zoom when you mouseover.. wanna remove that.

Please open Storefront/js/gk.scripts.js file and remove fragment "// Magic zoom selectors" from line 621 to 753. If you have another issue, please create new thread on the forum (in StoreFront wp section).