Too big images on the tablet

Support forum dedicated to GavickPro free and premium WordPress themes.
GK User
Tue Oct 14, 2014 2:50 pm
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
User avatar
Senior Boarder

GK User
Tue Oct 14, 2014 3:05 pm
User avatar
Moderator

GK User
Mon Oct 20, 2014 3:10 pm
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/
User avatar
Senior Boarder

GK User
Tue Oct 21, 2014 8:13 am
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.
User avatar
Moderator

GK User
Tue Oct 21, 2014 3:23 pm
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..
User avatar
Senior Boarder

GK User
Tue Oct 21, 2014 3:51 pm
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?
User avatar
Senior Boarder

GK User
Wed Oct 22, 2014 8:39 am
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.
User avatar
Moderator

GK User
Wed Oct 22, 2014 3:05 pm
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?
User avatar
Senior Boarder

GK User
Thu Oct 23, 2014 2:06 pm
Try to add also this code:
Code: Select all
.gk-is-wrapper-gk-storefront {
  margin-top: 44px;
}

User avatar
Moderator

GK User
Thu Oct 23, 2014 3:33 pm
Added but it dont change anything.. :\
User avatar
Senior Boarder

GK User
Thu Oct 23, 2014 3:47 pm
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.
User avatar
Senior Boarder

GK User
Fri Oct 24, 2014 8:52 am
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).
User avatar
Moderator


cron