Adjust clickable area size

[kebinu777]

I’m using a WordPress theme called Promotion, and in the portfolio section is an arrow to click to the next image. I want to be able to expand and position the clickable area wherever I want on the page. I can find where to re size the clickable area, but I can’t seem to find how to position it on the page. Can someone help me figure where in the CSS pluginstyle sheet the code is to fix it?

http://i.imgur.com/JWV6yyK.png

[Paulie_D]

We can’t diagnose an image…we need the live site.

[kebinu777]

Sorry about that, here is a link.

http://www.killingbrideportfolio.com/?page_id=48

[Soren]

Check this stylesheet

line 120 and below

[kebinu777]

This is the code that allows me to change the width and the height of the clickable area size, but i’m not sure where to position it on the page itself. Nothing in this section seems to change where the clickable area will be located on the page.

Position:absolute…not sure what that means or what to change it to customize the position.

.portfolio-container .portfolio-media .flex-direction-nav a {
display: block;
width: 24px;
height: 40px;
margin: -13px 0 0;
position: absolute;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: rgba(255,255,255,1);
top:50%;
opacity: 0.65;

[Soren]

I think the answer to your query depends on what you want the final design to be. How exactly do you want the links styled?

You have a few media queries in responsive.css file that styles the links and their containers, too. e.g.

@media (max-width: 979px) and (min-width: 768px) {
  .portfolio-container .portfolio-media .slider-nav-controls-container > * { 

    width: 100%;    

    height: 45px;
    
top: -60px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .portfolio-container .portfolio-media .flex-direction-nav a {
    top: 55%;
  }
}

Position absolute: an element is absolutely positioned (in relation) relative to it’s parent element. The parent is position:relative, the child is position:absolute. We can then use top, left, bottom and/or right properties to move the (child) absolute element around. Like above: flex-direction-nav a be 55% from top of it’s parent.

[kebinu777]

So this is the responsive.css section where I adjust the position for the clickable area in the portfolio page? So I just adjust left, right, top and bottom until it’s where i want it?

.portfolio-container .portfolio-media .slider-nav-controls-container > *{
    width: 45px;
    height: 45px;
    top: -60px;
}

.portfolio-container .portfolio-media .flex-direction-nav a:before{
    font-size: 17px;
}

.portfolio-container .portfolio-media .flex-direction-nav .flex-prev, .flex-direction-nav:hover .flex-prev{
    left: 3px;
}

.portfolio-container .portfolio-media .flex-direction-nav .flex-next, .flex-direction-nav:hover .flex-next{
    right: 3px;
}

.portfolio-container .portfolio-media .flex-direction-nav a{
    top: 55%;
}

.portfolio-container .portfolio-media .slider-status{
    font-size: 17px;
    line-height: 45px;
}

.portfolio-container .portfolio-content .content p{
    line-height: 20px;
}

.portfolio-container .portfolio-content .attributes .attribute{
    margin-bottom: 7px;
}

.portfolio-container .portfolio-content .attributes .attribute .title{
    line-height: 8px;
}

[Author]

Posts