Hi,

The portfolio grid is using the isotope script which calculates the position of each portfolio items. Unfortunately, like any other script this is not perfect and you may find a few minor glitches like the one you discover above. Have you check this issue on different browsers? Some of the browsers will display the issue and some will not. This is because of the way different browsers deal with width values containing decimal places. You can fix the issue partially by editing the portfolio item width or the width of its parent container.

.grid-sort-container {
    width: 101%;
}

Best regards,
Ismael

Hi,

You have to modify the footer.php file and remove this code:

echo avia_post_nav();

After that, add this in the functions.php file:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if( is_singular('portfolio') ) {
		echo '
<div class="portfolio-post-nav">';
		echo avia_post_nav();
		echo '</div>
';
	}
}

We wrapped the post navigation inside another container so that we can manipulate its position. Example css:

#top .portfolio-post-nav {
    position: absolute;
    right: 0;
}

#top .avia-post-nav {
    position: relative;
    float: left;
    margin: 0 50px;
}

Best regards,
Ismael

Hey auserde,

I’ve tagged the topic for our german speaking moderator, please wait for his reply.

Best regards,
Rikard

Hi Chris,

I’ve tagged the topic for our german speaking moderator, please wait for his reply.

Best regards,
Rikard

Hi,

To achieve what you are looking for you will have to create a different Color Section to display only on mobile. You can do this by adding ID’s to your Color Sections in the element options and then show/hide them with CSS:

@media only screen and (min-width: 768px) {
#desktop {
display:block;
}
#mobile {
display:none;
}
}

@media only screen and (max-width: 767px) {
#desktop {
display:none;
}
#mobile {
display:block;
}
}

Thanks,
Rikard

Hi,

Regarding your second inquiry, if I understand correctly, you’re referring to the “scroll to top” button. Please add this in the Quick CSS field to enable it on mobile devices:

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block;
}
}

For the initial inquiry, could you please provide a screenshot of the layout that you have in mind? Use imgur or dropbox. Note that you can use the color section element to create different sections with unique backgrounds.

Best regards,
Ismael

Hi,

We can’t reproduce the issue on our own installations. Anyway, please try this in the Quick CSS field:

.avia_transform .avia_start_delayed_animation.left-to-right {
    -webkit-animation: avia-ltr .8s 1 cubic-bezier(0.175,.885,.32,1.275) 0s;
    animation: avia-ltr .8s 1 cubic-bezier(0.175,.885,.32,1.275) 0s;
    opacity: 1;
}

.avia_transform .avia_start_delayed_animation.bottom-to-top {
    -webkit-animation: avia-btt .8s 1 cubic-bezier(0.165,.84,.44,1) 0s;
    animation: avia-btt .8s 1 cubic-bezier(0.165,.84,.44,1) 0s;
    opacity: 1;
}

.avia_transform .avia_start_delayed_animation.right-to-left {
    -webkit-animation: avia-rtl .8s 1 cubic-bezier(0.175,.885,.32,1.275) 0s;
    animation: avia-rtl .8s 1 cubic-bezier(0.175,.885,.32,1.275) 0s;
    opacity: 1;
}

Remove browser cache or hard refresh the page. Please let us know about the results.

Best regards,
Ismael