Forum Discussion

tavasjn24's avatar
3 years ago

Home Page Styling issue

Does anyone know why I can't get rid of a max-width: 1200px; 

.lia-content>.lia-top-quilt>.lia-quilt-row-main, .lia-content>.lia-top-quilt>.lia-quilt-row:not(.lia-quilt-row-header):not(.lia-quilt-row-main):not(.lia-quilt-row-main-bottom):not(.lia-quilt-row-footer)>.lia-quilt-column

That is the class that has that max-width and when ever I try and override that it doesn't do anything it keeps that max-width and then adds my override as a separate class.

  • tavasjn24 Below solution should have worked for you:

    .lia-quilt-community-page .lia-quilt-column.lia-quilt-column-24.lia-quilt-column-single.lia-quilt-column-main-top-content {

        width: 100% !important;
        padding: 0px !important;
    }

    Let me know if you have any other query, happy to help!!

9 Replies

  • Hi tavasjn24 Do you have a Link for us to your Community, and maybe tell what you want to achieve? And how did you override it?

  • tavasjn24 Could you please try adding max-width: unset;  in the existing class you have used margin-top: 40px as attached in the image or add a new class in that div and see if it works?

  • tavasjn24's avatar
    tavasjn24
    Guide
    3 years ago

    So that unset affects every div in the community. I am trying to only affect one and it isn't working when I try and change that one div. I believe it is due to the theme but I am not sure.

     

    Attached is the screenshot of where the issue is. 

     

  • tavasjn24 Hey,
    So I have two things for you.
    1.) use !important after the css you are applying
    2.) use the parent class so that it will affect only on this div and page

    example:

    .lia-content>.lia-top-quilt>.lia-quilt-row-main, .lia-content>.lia-quilt-community-page.lia-top-quilt>.lia-quilt-row:not(.lia-quilt-row-header):not(.lia-quilt-row-main):not(.lia-quilt-row-main-bottom):not(.lia-quilt-row-footer)>.lia-quilt-column {
    max-width1300px !important;

    I hope it helps.
  • tavasjn24's avatar
    tavasjn24
    Guide
    3 years ago

    So that unfortunately did not work. I will attach a screenshot for you 

  • tavasjn24 can you please confirm what you want to achieve here?

    Also, let me know if we can jump on a call to fix this.

    And Seems like I don't see full content of your community which you attached in screenshots.

  • tavasjn24 Below solution should have worked for you:

    .lia-quilt-community-page .lia-quilt-column.lia-quilt-column-24.lia-quilt-column-single.lia-quilt-column-main-top-content {

        width: 100% !important;
        padding: 0px !important;
    }

    Let me know if you have any other query, happy to help!!