Resize variation swatchs size (they are too small)

This topic has 12 replies, 4 voices, and was last updated 1 year, 8 months ago ago by Awais Ahmed

  • Avatar: Diollo Store
    Diollo Store
    Participant
    May 18, 2022 at 12:55

    hello, how to resize the color swatches size ?
    on mobile-tablet-desktop ?

    site url :
    diollo.store

    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 18, 2022 at 13:11

    Hello,

    Add this code in Theme Options > Theme custom CSS > Global:

    .single-product ul.st-swatch-size-large li.type-image {
        width: 60px;
        height: 60px;
    }

    Regards

    Avatar: Diollo Store
    Diollo Store
    Participant
    May 18, 2022 at 14:03

    worked only for the image field, i want to all the swatches to be resized

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 18, 2022 at 14:08

    Ok, change the code to:

    .single-product ul.st-swatch-size-large li {
        width: 60px;
        height: 60px;
    }

    Regards

    Avatar: Diollo Store
    Diollo Store
    Participant
    May 18, 2022 at 14:34

    worked nicely
    how i can do it in the shop page the little ones under the title ?

    also how to make inline (not above each other) in single product

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 19, 2022 at 07:22

    Hello,

    ul.st-swatch-size-normal li {
        width: 25px !important;
        height: 25px !important;
    }
    .single-product .et_product-block table.variations tr {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 15px;
    }

    Regards

    Avatar: bagshaw50
    bagshaw50
    Participant
    July 5, 2022 at 00:14

    Hi I have applied this code but it has not increased the text within the variation box, and it is not centre aligned. can you please tell me the code to increase the text and centre align it in the box? Please see website below

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    July 5, 2022 at 05:11

    Hello, @bagshaw50,

    Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS and under Global Custom CSS if you want to apply it on all the versions of the site like Desktop, Mobile, or Tablet.

    And if you want to apply it only on Mobile then paste it under Mobile Custom CSS.

    You can change the Font Size in the below given code as per your requirements.

    ul.st-swatch-size-normal li.type-label span {
        font-size: 30px !important;
    }

    https://postimg.cc/CRB3CZ0x

    Regards 8Themes Team.

    Avatar: bagshaw50
    bagshaw50
    Participant
    July 6, 2022 at 21:19

    any idea why the code isnt working

    https://empowerclothing.co.uk/product/the-nakd-scrunch-collection-scrunch-bum-gym-leggings-in-baby-blue/

    its creating a bigger white space instead of increasing the variation size

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    July 7, 2022 at 05:10

    Hello, @bagshaw50,

    The Code I gave you was for the Shop/Category pages as I also showed in the provided screenshot as well, but now you want to increase the size on the single product page, so you have to try with the below given Code.

    ul.st-swatch-size-large li.type-label span {
        font-size: 25px !important;
        padding: 5px !important;
    }

    https://postimg.cc/ctB36S7m

    Regards 8Themes Team.

    Avatar: bagshaw50
    bagshaw50
    Participant
    July 7, 2022 at 21:16

    perfect thanks

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    July 8, 2022 at 05:51

    If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot. If you like our Theme and Support.

    Thanks for contacting us.
    Have a great day🙂

    Topic Closed.

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.