Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1438847

    Hi there,
    the portfolio category page style changed. i remenber i do not make any setting, but changed. the square, the fonts changed.
    Pls check it
    https://www.wlhtex.com/en/products/functional-fabric/
    888.jpeg
    in my Chinese site, the portfolio category page style is still no changed.
    https://www.wlhtex.com/products/zai-sheng-mian-liao/

    I want
    1. May I change the style like this page

    2. otherwise, May I do not change and keep same as before.

    Thanks and best regards,

    Wang

    #1438867

    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

    #1438910

    Hi Ismael,
    Thanks for your kind support.
    the portfolio categories page is OK.
    only one point, i wonder if it is a bug: the small square small outside line, the hover error sometimes.
    QQ20240401222638.jpeg

    https://www.wlhtex.com/en/tag/activewear-fabric/
    the tag page still no change,
    could you pls help. and the small quare is on the top of picture, it should be in the bottom.
    QQ20240401222343.png

    Thanks and best regards,

    Wang

    #1438954

    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

    #1438968

    Hi Ismael
    Thanks for your support.

    #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;
    }

    i want make my tag page same style as categories page.
    i make some change of up code, but failed. could you help.

    Thanks

    Wang

    #1439049

    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

    #1439094

    Hi Ismael,
    Yes, that css solved the small square problem.
    i want the tag page style same as product page
    https://www.wlhtex.com/en/tag/activewear-fabric/

    QQ20240403221419.jpeg
    Thanks

    Wang

    #1439249

    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

    #1439404

    Hi Ismael
    Thanks for your help.
    the CSS is good. but the functions.php do not working.
    pls check am i right
    QQ20240407212938.jpeg

    Thanks and best regards

    Wang

    #1439412

    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

    #1439648

    Hi Mike & Ismael,
    i seems find the solution to show like categories.

    20240410210739.jpeg

    may i know how to change some and use in tag page.

    Thanks and best regards,

    Wang

    #1439668

    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

    #1439745

    Hi Mike,
    I think the code is right.
    but i confuse that why in tag page it shows a cutted picture 495×400 (https://www.wlhtex.com/en/wp-content/uploads/sites/2/2024/02/Durable-water-repellent-finish-polyester-PBT-fabric-1-495×400.jpg)
    in category page it show full picture (https://www.wlhtex.com/en/wp-content/uploads/sites/2/2024/02/Durable-water-repellent-finish-polyester-PBT-fabric-1.jpg)

    pls check this page https://www.wlhtex.com/en/products/100-polyester-warp-knit-fabric/
    the third picture.

    is it possible to show the full picture.

    Thanks

    Wang

    #1439883

    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

    #1439909

    Hi Mike
    https://www.wlhtex.com/en/tag/activewear-fabric/
    i want display the picture with whole logo in this page.
    Thanks

    #1439917

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

    Best regards,
    Mike

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.