portfolio category page style changed

Hey Yaphoon,

Thank you for the inquiry.

On the category page, items are displayed using the Portfolio Grid element, while the Masonry element is used on the Product page, which is they don’t look the same. If you want to adjust the style of the Portfolio Grid to make it look more like the Masonry element, try adding this css code:

#top.tax-portfolio_entries .no_margin.av_one_third {
    float: none;
    margin-right: 2%;
    width: 31%;
    margin-bottom: 2%;
}

#top.tax-portfolio_entries .grid-sort-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#top .grid-entry-title.entry-title {
    font-size: 1.2em;
    padding: 10px 13px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Have you made any changes to the arrows? To fix the styling issue with the arrows on the tag and category pages, please add the following css code:

.grid-content .avia-arrow, .tag .grid-content .avia-arrow {
    z-index: 10;
    border: none;
    top: -5px;
}

.grid-content .entry-content-header {
    z-index: 20;
    position: relative;
}

.tag .grid-content {
    position: relative;
}

.tag .grid-content .avia-arrow {
    border: none;
    top: -11px;
}

Best regards,
Ismael

Hi,

Thank you for the info.

You can place the css code that we previously recommend below your own modifications. This should override the previous styles and fix the positioning of the arrows.

.grid-content .avia-arrow, .tag .grid-content .avia-arrow {
    z-index: 10;
    border: none;
    top: -5px;
}

.grid-content .entry-content-header {
    z-index: 20;
    position: relative;
}

.tag .grid-content {
    position: relative;
}

.tag .grid-content .avia-arrow {
    border: none;
    top: -11px;
}

Best regards,
Ismael

Hi,

Add this css code to adjust the layout of the tag pages:

#top.tag .no_margin.av_one_third {
  float: none;
  margin-right: 2%;
  width: 31%;
  margin-bottom: 2%;
}

#top.tag .grid-sort-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#top.tag .grid-entry-title.entry-title {
  font-size: 1.2em;
  padding: 10px 13px;
}

Then add this code in the functions.php file to adjust the image thumbnail:

add_filter("avf_post_slider_args", function($atts, $context) {
  if( $context == "tag" ) {
    $atts['type']  = 'grid'; 
    $atts['preview_mode'] = 'custom';
    $atts['image_size'] = 'full';
  }
  return $atts;
}, 10, 2);

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
Try this function instead:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'fullsize';
}

Best regards,
Mike

Hi,
When I test this function on my test shop site:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'fullsize';
}

The category and tag archive page show the full size product images.

Best regards,
Mike

Hi,
When I test this function on my test shop site the category and tag archive page show the full size product images.
Have you tried disabling any other customization functions and plugins? Perhaps one is confliting with it. otherwise please include an admin login in the Private Content area so we can investigate further.

Best regards,
Mike

Hi,
Please enable the theme editor option so we can see and edit the child theme functions.php file.

Best regards,
Mike

Hi,
Thanks for the SFTP login but it doesn’t include a user name so we can login.

Best regards,
Mike

Hi,
Thanks for the SFTP login, but I don’t find your WordPress install with it or your theme files, perhaps this is the wrong directory, please check.

Best regards,
Mike

Hi,
Thanks, but this doesn’t help me to help you. I need to be able to add functions in your child theme to test.
Try adding this code to your child theme functions.php file in Appearance ▸ Editor:

add_filter("avf_post_slider_args", function($atts, $context) {
  if( $context == "tag" ) { 
    $atts['preview_mode'] = 'custom';
    $atts['image_size'] = 'full';
  }
  return $atts;
}, 10, 2);

Best regards,
Mike