- This topic has 7 replies, 3 voices, and was last updated 10 years, 7 months ago by
.
-
Posts
-
It is about the homepage: http://elektrowinterling.com/Admin: 001 Password: 246810As 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!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*/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
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 ck a a li x c nn i il calFigured 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/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;
}
- You must be logged in to reply to this topic.