Making the text content on Category page smaller less width

This topic has 6 replies, 2 voices, and was last updated 6 years, 8 months ago ago by Rose Tyler

  • Avatar: Lily
    Lily
    Participant
    April 13, 2018 at 12:31

    Hi,

    I would like to make the category description less wide.

    I have tried

    .term-description {width: 90%;}

    But maybe I have the wrong class?

    This is what I would like: https://screencast.com/t/WD7X5Y6jpn

    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 13, 2018 at 12:47

    Hello,

    .tax-product_cat .read-more-wrap {
        max-width: 75%;
        margin: auto;
    }
    

    Regards

    Avatar: Lily
    Lily
    Participant
    April 18, 2018 at 00:08

    Many thanks that is great

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 18, 2018 at 07:13

    You’re welcome!

    Regards

    Avatar: Lily
    Lily
    Participant
    April 24, 2018 at 16:38

    This is connected directl to this issue, but it relates to all the other ‘cache’ support requests I have sent in most recently.

    I have removed all cache tools, except Cloudflare which has been placed in development mode.

    And I moved the custom.css file to the parent there.

    The moment I did that and cleared cache I got the results…the width of content was 50%

    Then I changed the custom.css file to 79% max width, then cleared cache, locally, purged on server

    and the content is 50% See here: https://screencast.com/t/NPTyzjhZ0

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 25, 2018 at 08:05

    Hello,

    Thanks for the reply.
    Because of responsive, the description may look a bit different on different screen resolutions. In this case, you can change

    .tax-product_cat .read-more-wrap {
        max-width: 79%;
        margin: auto;
    }
    

    to

    @media only screen and (min-width: 1201px){ 
    .tax-product_cat .read-more-wrap {
        max-width: 75%;
        margin: auto;
    }
    }
    @media only screen and (max-width: 1200px){ 
    .tax-product_cat .read-more-wrap {
        max-width: 95%;
        margin: auto;
    }
    }

    Let me know result.

    Regards

  • Viewing 6 results - 1 through 6 (of 6 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.