[Support request] Little details in styles, more balance

Home Forums Support Little details in styles, more balance

This topic contains 10 replies, has 2 voices, and was last updated by  Tom 10 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #364729

    Marcelo.uy

    Hello Tom and Staff of Generatepress, i want to expose here since much time ago some details about styles, i am meticulous in design (padding, width, height), i like a cleaner and very well balanced design, and your theme is really like that. But, in some circunstances appear little problemas about this, for example if you change the font size the inputs field and text have not more the same vertical align, etc.

    I know that i can change the colors, height, etc. in the css style and i do that, but i think that examples (not the last) are styles own of generatepress and not customizer styles.

    I think that the best is show you this with some images:

    That is acorrect correlation, this is a default Generatepress design (woocommerce coupon):
    https://www.awesomescreenshot.com/image/2730728/e3cf90804706226c390cef0661af266c

    An this is what occur after changethe size of the font to 14px (you can see that the padding is not more correlative to the apply button:
    https://www.awesomescreenshot.com/image/2730730/930e1eeaa264a766f2b10ba7b2355915

    Another problem (in the original style of generatepress):
    The woocommer list have not the same padding that the rest of fields or buttons in generatepress, the balance here is lost:
    https://www.awesomescreenshot.com/image/2730731/3e4e9fcf51f59b4741b2331b26da23fb

    And this:
    The pagination inherit some colors but this is not allways great to see if we have not some control:
    https://www.awesomescreenshot.com/image/2730733/2559f7bcba211fa036e6947c63a2dab7

    Like always Tom, Thank you for give us the best theme and support, have you more success!

    GeneratePress 1.3.48
    GP Premium 1.4.2
    #364753

    Marcelo.uy

    Another 2 details:

    1. The font size in the submenu (secondary menu) is smaller, this have not chance to change the size or at least the same size that the parent menu.

    2. I have a problem, if i relocate the Cross Sells (related products selected by me in cart page) the 4 columns dont work, i use this code in fuction:

    /* Productos relacionados en carrito limitado a 4 */
    
    // Remove Cross Sells From Default Position 
    remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
    
    // Add them back UNDER the Cart Table
    add_action( 'woocommerce_after_cart', 'woocommerce_cross_sell_display' );
    
    // Display Cross Sells on 4 columns
    add_filter( 'woocommerce_cross_sells_columns', 'bbloomer_change_cross_sells_columns' );
     
    function bbloomer_change_cross_sells_columns( $columns ) {
    return 4;
    }
    
    // Display Only 4 Cross Sells
    add_filter( 'woocommerce_cross_sells_total', 'bbloomer_change_cross_sells_product_no' );
    
    function bbloomer_change_cross_sells_product_no( $columns ) {
    return 4;
    }

    You can see in this image what happned:
    https://www.awesomescreenshot.com/image/2730764/7e024c74d6c8bbc06a181cf0af3aa9cd

    I see that you use this css code:

    .woocommerce .wc-columns-4 ul.products li.product, .woocommerce-page .wc-columns-4 ul.products li.product, .woocommerce-page.columns-4 ul.products li.product, .woocommerce.columns-4 ul.products li.product {
        width: 21.2%;
    }

    The before code is of generatepress core, but the generatepress theme dont contemplate this:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        float: left;
        margin: 0 3.8% 2.992em 0;
        padding: 0;
        position: relative;
        width: 22.05%;
        margin-left: 0;
    }

    You can see different width for the list and that is the problem.
    If i change the css code to width: 21.2%; the problem is solved.

    #365012

    Tom Lead Developer

    Thank you for this! I’ll absolutely review all of this and make adjustments as necessary 🙂

    #365205

    Marcelo.uy

    Thank you Tom!
    If i see more small things like those, i will to reply in this topic.

    #372248

    Tom Lead Developer

    1. This is unfortunately a drawback of using padding for the sizing of fields and buttons. If your field is 14px, your button should be as well to match.

    2. This has been adjusted in the next version.

    3. Pagination colors need to be added to the WC options – I’ve made a note.

    4. Sub menu font sizes take the primary level size and reduce the size a bit for you. You can overwrite this with some pretty simply CSS if it doesn’t work with your style.

    5. Are you using the latest versions? Seems to be working for me: https://www.screencast.com/t/w9eUkUCtFkfj

    Thanks again!

    #372729

    Marcelo.uy

    1. Bootstrap for example use rem instead px. (https://v4-alpha.getbootstrap.com/migration/#global-changes)
    2. nice!
    3. nice!
    4. Ok, different pleasures 🙂
    5. Yes is the last version, i can see this again, but, you relocate related products with the function code?
    —>

    /* Productos relacionados en carrito limitado a 4 */
    
    // Remove Cross Sells From Default Position 
    remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
    
    // Add them back UNDER the Cart Table
    add_action( 'woocommerce_after_cart', 'woocommerce_cross_sell_display' );
    
    // Display Cross Sells on 4 columns
    add_filter( 'woocommerce_cross_sells_columns', 'bbloomer_change_cross_sells_columns' );
     
    function bbloomer_change_cross_sells_columns( $columns ) {
    return 4;
    }
    
    // Display Only 4 Cross Sells
    add_filter( 'woocommerce_cross_sells_total', 'bbloomer_change_cross_sells_product_no' );
    
    function bbloomer_change_cross_sells_product_no( $columns ) {
    return 4;
    }
    #375519

    Tom Lead Developer

    5. I’m not too sure what you mean? The add_action() and remove_action() aren’t working to relocate the items?

    #375629

    Marcelo.uy

    Hello Tom, the relocation work well, but the last column not fit inline (4 columns).
    https://www.awesomescreenshot.com/image/2730764/7e024c74d6c8bbc06a181cf0af3aa9cd

    #379874

    Tom Lead Developer

    Looking at this deeper.

    It looks like WC doesn’t add any specific classes related to the number of products set. That makes it very difficult for GP to adjust the CSS to allow for more or less products.

    I’m currently looking at flexbox for WC columns, which might fix this for us.

    #380586

    Marcelo.uy

    Nice!, thank you Tom!

    #380719

    Tom Lead Developer

    No problem. Thanks again for all your feedback 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.