Previous / Next buttons position in portfolio single page

[flixid]

Hello.

On my portfolio single page, I’ve managed to customize and move the previous and next buttons to either side of the image but I need them to be aligned to the bottom of the image regardless of browser size.

Also, I need to add an “x” button in the middle which would take me back to the portfolio list/grid. For example - “javascript:history.back()”

Could you please help?

I’m using this code :

/* ---- NAVIGATION ---- */

.flex-direction-nav a.flex-prev {
left: calc(0% + 0px);
  position: absolute;
  width: 40px;
}

.flex-direction-nav a.flex-next {
left: calc(100% - 40px);
  position: absolute;
  width: 40px;
}

.flex-direction-nav a {
background-color: transparent;
opacity:1;
}

.flex-control-nav {
  z-index: 99;
}

/* ---- NAV ARROWS ---- */


.flex-direction-nav [class*="x-icon-"].x-icon-chevron-right:before {
	content:  "";
	background:  url('http://whateverworks.cafe24.com/imgs/port_next.png') center center no-repeat;
	background-size: contain;
	display: block;
	width: 40px;
	height: 41px;
}

.flex-direction-nav [class*="x-icon-"].x-icon-chevron-left:before {
	content:  "";
	background:  url('http://whateverworks.cafe24.com/imgs/port_prev.png') center center no-repeat;
	background-size: contain;
	display: block;
	width: 40px;
	height: 41px;
}

[basanta]

Hi There,

Please update this CSS with your CSS. I have modified the css as per your requirement.

/* ---- NAVIGATION ---- */
.flex-direction-nav {
    position: absolute;
    z-index: 5;
    height: 100px;
    width: 100%;
    top: 86%;
}

.flex-direction-nav a.flex-prev {
  width: 40px;
}

.flex-direction-nav a.flex-next {
  width: 40px;
}

.flex-direction-nav a {
background-color: transparent;
opacity:1;
}

.flex-control-nav {
  z-index: 99;
}

/* ---- NAV ARROWS ---- */


.flex-direction-nav [class*="x-icon-"].x-icon-chevron-right:before {
	content:  "";
	background:  url('http://whateverworks.cafe24.com/imgs/port_next.png') center center no-repeat;
	background-size: contain;
	display: block;
	width: 40px;
	height: 41px;
}

.flex-direction-nav [class*="x-icon-"].x-icon-chevron-left:before {
	content:  "";
	background:  url('http://whateverworks.cafe24.com/imgs/port_prev.png') center center no-repeat;
	background-size: contain;
	display: block;
	width: 40px;
	height: 41px;
}

Let us know how it goes.

If that doesn’t help please send us your Login details in a secure note so that we can help you on this.

Thanks

[flixid]

Firstly, thank you for your support.

The navigation arrows align according to the way I need them to be but there’s a slight problem which I previously encountered.

When the page loads the arrows are where they should be but when I adjust the size of the browser, instead of “sticking” to the image and automatically readjusting position according to the image size, they just stay where they are and I have to reload the page so that they get back into position.

I’ve also added an “X” button to the content-portfolio.php file and a “close_page” line in the global CSS which also needs to readjust position in the same way.

Thank you once again.

Andy

[basanta]

Hi There,

Thanks for the info!
Can you please add this css to global css and let us know how this works.

.x-flexslider {
  height: auto !important;
}

Thanks

[flixid]

Works perfectly. Thank you!

[rad]

You’re most welcome!