Home Forums Weaver Xtreme Theme Single column mobile version

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17576
    OC2PS
    Participant

    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…
    #21141
    scrambler
    Moderator

    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

    #21142
    OC2PS
    Participant

    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/

    #21143
    scrambler
    Moderator

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

    #21144
    OC2PS
    Participant

    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.

    #21145
    OC2PS
    Participant

    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!

    #21146
    scrambler
    Moderator

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

    #21147
    scrambler
    Moderator

    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

    #21148
    OC2PS
    Participant

    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!

    #21149
    OC2PS
    Participant

    @weaver Bruce, perhaps consider this for next version?

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