Intro Slide Image Cut Off

Responsive, suitable for any type of business, built for any needs elegant one-page Joomla template.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Thu Feb 26, 2015 7:15 am
Reply with quote
Report this post
I have changed some code to make the nave bar stay where it is, but now at full width my images are cut off at the top.

How can I make it so that the images start at the bottom of the nav bar?
User avatar
Junior Boarder

GK User
Thu Feb 26, 2015 3:56 pm
Reply with quote
Report this post
Could you please post an url to your site?
User avatar
Moderator

GK User
Fri Feb 27, 2015 1:56 am
Reply with quote
Report this post
User avatar
Junior Boarder

GK User
Sat Feb 28, 2015 12:56 pm
Reply with quote
Report this post
I'm afraid it cannot be fixed easily. You could try this solution:
Please edit: /templates/gk_Creativity/css/override.css and add at its end:
Code: Select all
.gkIsWrapper-gk_creativity {
padding-top: 81px;
box-sizing: border-box;
}

but there will be some animation glitch.
Remember to enable "CSS override" in template settings - advanced section.
User avatar
Moderator

GK User
Mon Mar 02, 2015 5:16 am
Reply with quote
Report this post
Thanks Cyberek,

I did this used the class .gk-intro > div and it worked without the animation glitch.

I guess this has compatibility issues with <ie6 but that's no big deal to me.

Cheers
User avatar
Junior Boarder

GK User
Mon Mar 02, 2015 5:19 am
Reply with quote
Report this post
Would there be any way to stop one of the intro slides from cropping the left side of the image?

In some intro images once you get to the mobile sizing I've lost the important part of the image...
User avatar
Junior Boarder

GK User
Tue Mar 03, 2015 8:48 am
Reply with quote
Report this post
The cropping cannot be changed - it is the way css displays background image when you want to make it fill entire browser viewport. Imagine a landscape image and square viewport - to fill 100% of the viewport left and right of the image will be cutted out. Now image portrait image and square viewport - top and bottom will be cutted out.
User avatar
Moderator

GK User
Wed Mar 04, 2015 3:29 am
Reply with quote
Report this post
I realise that it needs to be cropped, I just wanted to know if I can have it cropping off one side and the other side fixed to the edge of the browser.

Cheers
User avatar
Junior Boarder

GK User
Wed Mar 04, 2015 6:22 am
Reply with quote
Report this post
I worked this out using the background-position attribute and selecting the slides by using nth-of-type selector. I know this won't work for IE but hopefully not too many people using ie on their mobiles...

Ensures none of the left is cut off on the first slide

.gkIsSlide:nth-of-type(1){
background-position:0% 100%;
}

Ensures none of the right is cut off on the second slide

.gkIsSlide:nth-of-type(2){
background-position:100% 100%;
}
User avatar
Junior Boarder

GK User
Sat Mar 07, 2015 6:56 pm
Reply with quote
Report this post
Great idea :)> i'm glad you could solve it by yourself.
Is there anything else I can help you with regarding this topic?
User avatar
Moderator

GK User
Thu Mar 12, 2015 1:04 am
Reply with quote
Report this post
No that's all I needed to work out, thanks Cyberek.
User avatar
Junior Boarder

GK User
Thu Mar 12, 2015 12:30 pm
Reply with quote
Report this post
If you will have any other questions (not relative to this thread), feel free to post new forum threads - it allows us to answer you faster.
User avatar
Moderator

GK User
Tue Mar 24, 2015 6:04 pm
Reply with quote
Report this post
WilliWissler wrote:http://www.byronpropertysearch.com.au

Very nice site!
User avatar
Fresh Boarder

GK User
Tue Mar 24, 2015 9:13 pm
Reply with quote
Report this post
Yes it is... @WilliWissler - perhaps you could consider adding your work to our "hall of fame" ;)?
There is a subforum just for that purpose:
https://www.gavick.com/forums/member-sites
User avatar
Moderator


cron