Announcement

Collapse
No announcement yet.

How to widen the 30-column in the 70-30 layout

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to widen the 30-column in the 70-30 layout

    In the 70-30 layout, the second column has 300px width (including the left padding of 15px) by default. So the actual width of widget that can fit there is only 285px (300 - 15). Each widget has 15px of padding and 1px of border on all sides. So the actual content a widget can only occupy in the second column is 253px. That is 285px - (15px padding * 2) - (1px border * 2). You may find having only 253px of actual content in the second column too narrow for your needs. But worry not! You can increase it using the following custom CSS that you need to add in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor.

    Code:
    @media (min-width: 1025px) {
        .l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
        .l-desktop .l-row__fixed--right > .l-col__flex-6 {
            margin-right: 400px;
        }
    
        .l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
            margin-right: -400px;
        }
    
        .l-desktop .l-row__fixed--right > .l-col__fixed-6 {
            width: 400px;
        }
    }
    Adjust 1025px and 400px accordingly. Those values are the ones I use on this site. 1025px means the 400px wide second column will only take effect when the screen width is at least 1025px. Anything below will keep the default 300px column width.

    #2
    Hi Glen, I am logged in but the code box still says, "You need to be logged in to view the code. Login or Register now!"


    edit: after I push f5 to refresh the page I can see the code (sometimes I have to keep refreshing to get it to show)

    Comment


      #3
      Try again.

      Comment


        #4
        I came back to look at the code again and it disappeared...after refreshing a few times it will eventually show up.

        Thanks this code worked well though. I wanted to display ads that were 300pixels wide so I changed the three 400px's in your code to 347px and they all show nicely!

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          There's a system cache issue I haven't fixed yet. If I clear it, then it will work. That's what I did when I asked you to try again.

        #5
        Hello Glenn, I have to make our forum width wider but I am unable to do it. This is the link of our forum :

        https://forums.24x7servermanagement.com/

        So Kindly guide me how to do it.

        Comment


          #6
          Neha Pariyar did you try the code I posted?

          Comment


            #7
            After putting the above code this is what I am getting . I have to make the forum width wider like your site .But I am unable to do it. Kindly help me. I dont want the spaces i.e. on left and right of the forum .
            Attached Files

            Comment


              #8
              As what the topic title says, the code in this topic is for widening the 30-column layout and not for widening the entire content or removing the spaces on the left and right.

              To do what you want, you need to change the values of the following stylevars in the Style Variable Editor in AdminCP:
              • wrapper_max_width
              • wrapper_min_widtth
              • wrapper_width
              • wrapper_margin

              Comment


                #9
                Hello Glenn. Could you please help me with the appropriate value for:
                • wrapper_max_width
                • wrapper_min_widtth
                • wrapper_width
                • wrapper_margin

                Comment


                  #10
                  Thank you Glenn. I just resolve my problem. Thank you for your help.

                  Comment


                    #11
                    Glad to help

                    Comment


                      #12
                      Originally posted by glennrocksvb View Post
                      In the 70-30 layout, the second column has 300px width (including the left padding of 15px) by default. So the actual width of widget that can fit there is only 285px (300 - 15). Each widget has 15px of padding and 1px of border on all sides. So the actual content a widget can only occupy in the second column is 253px. That is 285px - (15px padding * 2) - (1px border * 2). You may find having only 253px of actual content in the second column too narrow for your needs. But worry not! You can increase it using the following custom CSS that you need to add in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor.

                      Code:
                      @media (min-width: 1025px) {
                      .l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
                      .l-desktop .l-row__fixed--right > .l-col__flex-6 {
                      margin-right: 400px;
                      }
                      
                      .l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
                      margin-right: -400px;
                      }
                      
                      .l-desktop .l-row__fixed--right > .l-col__fixed-6 {
                      width: 400px;
                      }
                      }
                      Adjust 1025px and 400px accordingly. Those values are the ones I use on this site. 1025px means the 400px wide second column will only take effect when the screen width is at least 1025px. Anything below will keep the default 300px column width.
                      Hi Glenn,

                      Would the below be the correct code if I only wanted one specific page changed? What about the before the @media ?

                      Code:
                      @media (min-width: 1025px) {
                      .page3.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
                      .l-desktop .l-row__fixed--right > .l-col__flex-6 {
                      margin-right: 400px;
                      }
                      
                      .page3.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
                      margin-right: -400px;
                      }
                      
                      .page3.l-desktop .l-row__fixed--right > .l-col__fixed-6 {
                      width: 400px;
                      }
                      }
                      William

                      Comment


                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        You got it right. You just missed one - the second css rule inside @media block

                      #13
                      Thank you very much.

                      Comment


                        #14
                        Hey Glenn, this works great. But could you share the code for doing it to the 30-70 layout? Making the 30 column wider, such that it stays that way when narrowing the window and the 70 side shrinks in width? I just couldn't seem to suss it out...

                        Comment


                          #15
                          I'll check and start a new topic for it.

                          Comment

                          Working...
                          X