background not aligned proper in mobile view

GK User
Thu Dec 04, 2014 8:52 pm
Background image great on desktop and tablet but not aligned proper in mobile view, way to big!
Seems the "cover" mode don't work?

Any idea?

Best regards,
Stef
User avatar
Expert Boarder

GK User
Fri Dec 05, 2014 7:10 am
Could you please post an url to your site?
User avatar
Moderator

GK User
Fri Dec 05, 2014 10:43 am
User avatar
Expert Boarder

GK User
Fri Dec 05, 2014 1:42 pm
Could you please post a screenshot and mark problematic area on it?
User avatar
Moderator

GK User
Sat Dec 06, 2014 8:34 pm
2014-12-06-20-20-59.png
This is what it is now (bad!)

2014-12-06-20-22-22.png
This is good! (good!)

With your help i made the header module bigger in a older topic (full screen size in desktop mode) I don't know if this code mesh up the mobile code? ( code: #gkHeaderMod .gkPage {
max-width: 3000px;
}

Thank you,
Stef
User avatar
Expert Boarder

GK User
Mon Dec 08, 2014 11:10 am
From what I see you are using 3rd party plugin - smart slider. Sadly - we don't provide support for 3rd party extensions.
User avatar
Moderator

GK User
Mon Dec 08, 2014 1:12 pm
i did try the default setting with your original custom html code but it looks the same as with the smart slider option!
So i don't think smart slider is the problem here?!

I disabled smart slider and put back the original, cleared all cache but same results.

Thank you for your time!
Stef
User avatar
Expert Boarder

GK User
Tue Dec 09, 2014 11:01 am
O, the actual problem is within image itself and how it is implemented. To make it "responsive" on all screens it is set to "cover" in background-size. It makes image to fit into given box, but when something doesn't fit, it is cropped out. This way if image is portrait cropped - it will be cute on right and left when viewed on vertical device, but it will look fine on horizontal device.
This way of image implementation works great to the point when all image content is important (in your case), it is also the only way to have responsive images that fills given box size. Also logo should not be a part of the image - it should be placed separately as template logo so it always displays.
In your case I would suggest to create custom css overrides and use media queries for different screen sizes and orientations which loads different image.
User avatar
Moderator

GK User
Thu Dec 11, 2014 10:42 am
i understand thx for the help!

Stef
User avatar
Expert Boarder

GK User
Fri Dec 12, 2014 3:52 pm
Please let me know if you would have any troubles with implementing this solution.
User avatar
Moderator

GK User
Fri Dec 12, 2014 3:56 pm
for now i got it fixed thank you so much for your time! :))))
User avatar
Expert Boarder

GK User
Fri Dec 12, 2014 4:20 pm
No problem :).
User avatar
Moderator


cron