Home › Forums › Weaver Xtreme Theme › Single column mobile version
- This topic has 9 replies, 2 voices, and was last updated 7 years, 2 months ago by
OC2PS.
-
AuthorPosts
-
April 8, 2015 at 19:22 UTC - Views: 1 #17576
OC2PS
ParticipantI have a page with posts. 3 columns.
Responsive – 3 columns go down to 2 as the browser width decreases.Problem: That’s all. Further reducing width keeps 2 columns, instead of reducing columns to 1 at smaller widths.Or perhaps someone can help me achieve that…April 8, 2015 at 20:35 UTC - Views: 3 #21141scrambler
ModeratorI believe the 3 columns post page setting uses the content-3-col class explained here
http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5
So you should be able to do what you need by adding the rule below to Main options > Fonts & Custom > Custom CSS Rule box
.is-phone .content-3-col {width:100%;}
If not leave the rule in and post a link of the page in question
April 9, 2015 at 05:17 UTC #21142OC2PS
ParticipantThat made it worse. Now the columns are not even going down to two and are overlapping on small screens.
BTW, I am using masonry.
Here’s the link http://csillam.hu/
April 9, 2015 at 05:26 UTC #21143scrambler
ModeratorYou should have started with that, and this is why we ask you to provide a link 🙂
Try the rule below
.is-phone .blog-post-cols-3 {width:98%;position:relative !important;left:0px !important;}
April 9, 2015 at 05:35 UTC #21144OC2PS
ParticipantThanks! That worked. This might be what lots of users need…perhaps Bruce should consider including in Weaver X as default behavior.
While we are on this, can I ask you for help on something else as well?
On this same site, I am struggling with getting the header (combo of site title and tagline) right. I want them to sit next to each other. Should look like http://csillam.hu/wp-content/uploads/2012/03/cst-logo.png Was able to do this in Weaver II Pro, but Weaver X is proving to be harder.
#site-tagline, .site-tagline, #site-tagline {
clear: none !important;
display: inline-table !important;
margin: 0 !important;
max-width: 50% !important;
margin: 0.25% 0 0.25em0.25% !important;
}
does not seem to have helped.April 9, 2015 at 06:54 UTC #21145OC2PS
ParticipantArgh!
While
.is-phone .blog-post-cols-3 {width:98%;position:relative !important;left:0px !important;}
makes mobile view single column, it does not work as expected – there is a huge space below each article excerpt!April 9, 2015 at 17:33 UTC #21146scrambler
ModeratorFor the space, you did not use my full rule (omitted position relative, and you need to add one property
.is-phone .blog-post-cols-3 {width:98%;position:relative !important;left:0px !important; top:auto !important;}
April 9, 2015 at 17:38 UTC - Views: 3 #21147scrambler
ModeratorFor the title and tagline, I see them side by side so I am not sure what the issue is.
Your margin rule has invalid syntax and therefore is not being applied, you missed a space between values
April 9, 2015 at 18:14 UTC #21148OC2PS
ParticipantActually I had used your full rule. Omitting position relative finally *fixed* it. But will try again with position and top.
I fixed the title and tagline – i was only formatting the tagline twice, instead of formatting title too – one of those days!
April 10, 2015 at 06:44 UTC #21149 -
AuthorPosts
- You must be logged in to reply to this topic.