Single column mobile version

[OC2PS]

I 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…

[scrambler]

I 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

[OC2PS]

That 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/

[scrambler]

You 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;}

[OC2PS]

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

[OC2PS]

Argh!

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!

[scrambler]

For 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;}

[scrambler]

For 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

[OC2PS]

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

[OC2PS]

@weaver Bruce, perhaps consider this for next version?

[Author]

Posts