[LiquidatorParticipant]

One more thing:
if i change it to background-size: contain it seems to be more “responsive” and readable on mobile phone, but there’s one problem: it creates big grey gaps both on top and bottom. Is there any code to remove that grey gap?

[ChristopherModerator]

Hi there,

Actually the normal act of this code is what you see since it resizes the image to fit the screen with no stretching then it fills the extra area with background color.

Hope it helps.

[LiquidatorParticipant]

1. So, there’s no actual solution for this to remove that grey gaps, right?

2. That 1px separator line on navbar becomes weird in mobile view:

Any way to fix it? (make it not vertical on mobile view, but to remove it, like on http://theme.co/x/)

Last question (i hope): As you see i have one-page navigation website with some “extra” pages. Can i build the same one-page nav website (by using that script u gave on 1st page) + with checkout page?

Thank you

[Kosher KMember]

Hello,

1. I’m not really sure what you are trying to accomplish here? you can simply create a full width slider with proportion resolution to your image and it will re-size properly on mobile.

2. You can remove the left border using this CSS

@media (max-width: 767px) { 
	.x-navbar .x-nav > li {
		right: 1px solid #000;
	}
}

and yes, you can build one page navigation using the same javascript, and simply add the checkout page on your menu.

hope that helps

[LiquidatorParticipant]

Hi again!

1. I’m trying to make it more “responsive” on mobile. 100% 100% and cover options for slider are good, but they squeeze the image only by width, but not by height on mobile view, whether “contain” works for both dimensions. Main problem is that option leaves big grey gaps both from top and bottom of the slider. So, i am asking is there any way to remove that grey gaps on “contain” view.

2. Not really what i mentioned.

I need to remove that black line on MOBILE VIEW, but keep it (that separator line) on PC

3. Ok, good.

Thank you

[Paul RModerator]

Hi,

Thanks for the screenshot.

To remove the black line. Try the code below.

@media (max-width: 979px){
	.x-navbar .x-nav > li {
		border:0;
	}
}

Regarding the image can you try making it an image instead as a background.
Right now it is set as a background. If it is an image the height of the div that wraps
will automatically adjust with height of the image and the grey gaps will be removed.

Hope that helps.

[LiquidatorParticipant]

Border code worked, thanks.

Ok, then i need that slide to be static without any navigation and navigation buttons. Just like now. Is that possible? If yes, please tell me how to.

Thank you!

[ZeshanMember]

Hi there,

Thank you for writing in!

You can simply disable the slider’s looping from General Settings and navigation from Navigation (see: http://prntscr.com/4px48g) from the slider’s settings page (e.g. http://prntscr.com/4px4v7).

Cheers!

[Author]

Posts