Home Forums Weaver Xtreme Theme 4 Columns don’t work

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17934
    weaverfan
    Participant
    It is about the homepage: http://elektrowinterling.com/
    Admin: 001 Password: 246810
    As crambler described in “General methods to create multiple columns” I inserted:
    <div class=”content-3-col-left”>Put your left column stuff here.</div>
    <div class=”content-3-col-left”>Put your middle column stuff here.</div>
    <div class=”content-3-col-left”>Put your middle column stuff here.</div>
    <div class=”content-3-col-right”>Put your Right column content here.</div>
    <div class=”clear-cols”></div>

    It is on the page “Home”, the post “Produktauswahl”.
    After several hours I feel confused – cannot find the mistake.
    They do not show up in 4 columns.
    In mobile and tablet view I want 2 columns each row.
    Searching for help now!
    #22886
    scrambler
    Moderator

    The tutorial you cite indicates that classes are different on Xtreme

    “Weaver Xtreme has slightly different classes, they are content-2-col  for 2 columns and content-3-col  for 3 columns”

    You can read the thread below for Xtreme

    http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

    Now for 4 columns, using the 3 columns classes could be possible, but becomes more work. Because of all the mobile responsive CSS you would need to override a lot of CSS and you may as well create your own set of 4 columns and CSS

    But the thread you speak of (http://forum.weavertheme.com/discussion/8303/general-methods-to-create-multiple-columns-widgets-contents#latest )

    has the code and CSS for 4 columns at the bottom of the thread (below)

    As it is a frequent configuration, here is the code/css for 4 columns turning into 2 on tablets and 1 on phones

    HTML for the content editor (in text mode)

    <div class=”mycol1″>Put your column one stuff here.</div>
    <div class=”mycol2″>Put your column two stuff here.</div>
    <div class=”mycol3″>Put your column three stuff here.</div>
    <div class=”mycol4″>Put your column four content here.</div>
    <div class=”clear-cols”></div>

    Then put the CSS below in the Custom CSS Rule box

    .mycol1, .mycol2, .mycol3, .mycol4 {float:left;width:23.5%;margin-right:2%;margin-bottom:2%;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:grey;overflow:hidden;}  /*sets the base width padding and margin*/

    .mycol4 {margin-right:0px;}  /*removes the right margin on the last one*/

    @media only screen and (max-width:780px) {
    .mycol1, .mycol2, .mycol3, .mycol4 {width:49%;}
    .mycol2 {margin-right:0px;}
    .mycol3 {clear:both;}
    }                              /*This rule changes the width and margin to get 2 columns on top of 2 columns when browser is under 780px wide*/

    @media only screen and (max-width:580px) {
    .mycol1, .mycol2, .mycol3, .mycol4  {width:100%;margin-right:0px;}
    }                     /*This rule changes the width and margin to get 4 columns on top of each other when browser is under 580px wide*/

     

    #22887
    weaverfan
    Participant

    I ‘ve got it now. Thank you. 

    Still have one problem  – the fourth column slips down…

    #22888
    scrambler
    Moderator

    I do not understand why nor how it can do that, but reducing the with a little bit from 23.5% to 23.3% and reducing the 2 column value from 49% to 48.6%  seems to fix it

    #22889
    weaverfan
    Participant

    Yes, these values fixed it – great! Thank you.

    #22890
    ROBIN
    Participant

    Is this thread for Weaver Xtreme or Weaver II?  


    I am thinking it is for Weaver II because on Weaver Xtreme  It worked great on the desk top but it stacked the words like this on a small mobile:
      

          s     w    f     c
          k     a    a     l
          i      x    c     n
          n           i      i
                       l     c
                             a
                             l
    Figured I would ask for clarification, because if I am wondering someone else may be also. 
    This is the page I tried it on: http://xeniaskincare.com/195-2/
    #22891
    scrambler
    Moderator

    This method is generic for any theme as it is just HTML and CSS and has nothing to do with the theme.

    Your main issue is that your CSS is broken because I believe you placed the rules in the per page style box.

    When you place rule in the per page style box, the theme will automatically add a .page-id-xxx class to all of them to make them specific to that page.

    This will break rules that have multiple selectors,  as it will add the page ID selector at the beginning of the rule, instead of at the beginning of each selector. it will also break rules that start with @media as it will add the page ID class in front of it, causing a syntax error. this is why your columns do not stack, as all the @media rules are invalid.

    So you need to put all the CSS rules for the columns in Main Options > Fonts & Custom > Custom CSS Rule Box, and not in the per page style box.

    There is a way to put them in the per page style box if you actually needed to specialize these rule to that page, but unless you are going to use the mycolx classes in other pages with different styling, there is no need to do that here.

    Second:
    You need to clarify what you are trying to do, because right now your four columns are shifted right and stacked, because of the round image that takes space on the left. if your intent was to have four columns below the image, you need to add a clear to your fun div rule. You rule should be

    .fun {
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
    background-color:#EFEEE4;
    color:#4F084F;
    width:100%;
    padding:15px;
    clear:both;
    }

    #22892
    ROBIN
    Participant

    You are so very patient.  Your help is so appreciated.  

    Thank you. 
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.