Forum Discussion

tavasjn24's avatar
tavasjn24
Guide
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.

UI & Design
  • AbhishekGu's avatar
    AbhishekGu
    3 years ago

    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!!

  • AbhishekGu's avatar
    AbhishekGu
    Khoros Staff
    3 years ago

    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!!

  • AbhishekGu's avatar
    AbhishekGu
    Khoros Staff
    3 years ago

    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-width: 1300px !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 

  • AbhishekGu's avatar
    AbhishekGu
    Khoros Staff
    3 years ago

    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.

  • Hoekstra_VFZ's avatar
    Hoekstra_VFZ
    Advisor
    3 years ago

    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?

  • MohammedF's avatar
    MohammedF
    Moderator
    3 years ago

    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.