Home Forums Weaver Xtreme Theme Can't see error preventing Mobile Responsive

Topic Resolution: Answered

This topic contains 9 replies, has 2 voices, and was last updated by  scrambler 1 week, 3 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #56316
    Answered

    swmagic999
    Participant

    The site wjmoon.com looks ok on pc but the title and tag look messy on mobile (and I don’t think I’ve used px anywhere, just %)

    Any suggestions?

    #56320

    scrambler
    Moderator

    You need to be more specific about what you mean by messy as there are many issues here.

    First you need to decide where the title and tagline will be on mobile.
    Right now,. you have the title and tagline as well as the logo set to be over the header image.
    On mobile that makes a column that is higher than the header image, causing it to stick out under the image.
    Either you hide the title tagline on mobile, or we could have the title and tagline move to the right of the image.

    Until you tell us more about the above, below some generis issue / fixes

    To prevent title and tagline to go on several lines, remove the max width 24% you set on title and tagline.
    If it needs to stay the width of the logo, use 35%

    But you also need to add the rule below so the title clears the image
    #site-title, .site-title {clear:both;}

    For the font size, If the font size option does not have the size you want, use ems, and add the mobile rule to

    Instead of
    #title-tagline {font-size:60%}

    use
    #title-tagline {font-size:.8em;}
    @media all and (max-width:767px){
    #title-tagline {font-size:.8em !important;}
    }

    #56323

    swmagic999
    Participant

    I started playing with your instructions and then it hit me: Hide the Title/tag on mobile and simply put it into the content (h1, h2).

    Is that also part of the mobile css? Or how else.

    As usual, many, many thanks.

     

    #56324

    scrambler
    Moderator

    not sure what you mean by

    Is that also part of the mobile css? Or how else.

    But title and tagline both have a hide area option to hide them on mobile

    #56325

    swmagic999
    Participant

    Yes, I understand your confusion. I found the check box for hiding title & tag on phones.

    Perhaps I’ll change the question.  How do I add an h1 h2 to a page that ONLY appears on mobile?

    #56326
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    You can use the show_if shortcode.

    The exact syntax is in the Add-ons page (click the red help buble next to it).

    There is aslo a shortcode for the title and tagline, so you could use the following

    [show_if device=mobile]
    [site_title matchtheme=true]
    [site_tagline matchtheme=true]
    [/show_if]

    Or just the show_if with your HTML

    [show_if device=mobile]
    Your HTML
    [/show_if]

    #56327

    swmagic999
    Participant

    Yes, that worked.  Last 2 questions: how can I make the title .8 em and the tag .6 em? And should the header css codes be broken out in the CSS Header syntax?

     

     

    #56328

    swmagic999
    Participant

    title in title css text box and tag in tag css box.

    #56334

    swmagic999
    Participant

    Curious. Does Weaver use the css styling box as an override for both title and tag font size dropdown?

    I reset the font styles back to inherit.

    I added this

    {font-size:.8em !important;} to the title css style

    and this

    {font-size:.8em !important;} to the tag css style.

    This works, but does that override font size dropdown?

    #56335

    scrambler
    Moderator

    CSS+ rules come after the theme option rules, so if the selector is the same, the CSS+ rule will override the option rules, even without !important

    Now sometimes the selector may differ, and if the selector of the theme option rule  is stronger than the CSS+ rule selector, the CSS+ rule would not override, and therefore may need !important to do so.

    In doubt, you can use your browser developer tool to inspect the elements and check the selectors of both the theme option rule and your CSS+ rule

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.