Home Forums Weaver Xtreme Theme mobile view

Viewing 16 posts - 1 through 16 (of 67 total)
  • Author
    Posts
  • #69150
    merlojh
    Participant

    The mobile view on phones and tablets is not very good and there is a white space below the image on bottom John

    Home

    #69151
    scrambler
    Moderator

    I have no idea what you mean by “not very good”, so you will eventually need to be more specific.

    That said, that header is quite a bit complicated and messy.
    I would start by simplifying it by doing the following

    • Get rid of that white empty header image, you do not need a header image.
    • Then remove the {position:absolute;} rule in the Custom CSS that you put in the Header HTML BG CSS+ box
    • Then add the rule below in the theme Global Custom CSS Rule box
      .menu-primary {position:absolute;}
    • Then change your existing rules below to edit the top padding in the first one, and remove it in the second
      from
      #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:3%;}
      @media only screen and (max-width: 600px) {
      #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:10%; padding-left:20%; padding-top:0%; padding-bottom:10%; }
      }
      to
      #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}
      @media only screen and (max-width: 600px) {
      #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:10%; padding-left:20%; padding-bottom:10%; }
      }

    Once that is done, be specific about any issue

    #69155
    merlojh
    Participant

    Now it just a mess? Not sure what I did wrong?? John

    #69157
    Weaver
    Keymaster

    Actually, at the moment the site looks its best on a phone.

    There seems to be margin/padding issues on the tablet view, and the header contact me button is not displayed nicely as on the phone view.

    #69158
    merlojh
    Participant

    What happened to the button??

    #69159
    merlojh
    Participant

    How do I get the blue area the way it was?

    #69160
    scrambler
    Moderator

    Change
    .menu-primary {position:absolute;}
    to
    .menu-primary {position:absolute;top:0;}

    You broke your first @media rule below by deleting the closing bracket which destroyed your button background, and you have some weird character inside the calc property (no idea what it is supposed to be)
    you have
    @media only screen and (max-width: 600px) {
    .is-mobile #header-html div {float:none !important;text-align:center;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}
    @media only screen and (max-width: 600px) {
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:10%; padding-left:20%; padding-bottom:10%; }
    }

    Instead of (closing bracket in yellow), weird character in orange
    @media only screen and (max-width: 600px) {
    .is-mobile #header-html div {float:none !important;text-align:center;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}
    }
    @media only screen and (max-width: 600px) {
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:10%; padding-left:20%; padding-bottom:10%; }
    }

    #69161
    merlojh
    Participant

    I had the blue header area the blue was a box smaller now it takes up the whole header and the css seems like it was for the green button still now green button I tried to fix it no luck? John

    #69162
    scrambler
    Moderator

    For your button background, If you are not going to fix the errors you make and that I point to you, I dont know what else to do.

    You are missing a closing bracket on the @media rule below

    @media only screen and (max-width: 600px) {
    .is-mobile #header-html div {float:none !important;text-align:center;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}

    Add it back so it looks like

    @media only screen and (max-width: 600px) {
    .is-mobile #header-html div {float:none !important;text-align:center;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}
    }

    In order for the blue top not to take the whole space, Change the Header HTML Area Align option from align wide to center

    Then changes its Width option to less than 100%, like 90%

    Next you need to type Transparent in the Primary Menu BG Color box.

    We can continue fine tuning when this is done

     

    #69167
    merlojh
    Participant

    Nothing seems to be working? John

    #69168
    scrambler
    Moderator

    I do not know what you are doing John, But none of the things I told you to do have been done.

    • You are still missing the closing curly bracket on the @media rule
    • You have not set the Header HTML Width to 90%
    • You have not set the menu bar BG to transparent

    If you did, then you did not clear your caches

    • Please paste here the content of your custom CSS Rule box
    • Please post a screenshot of Main options > Header > Header HTML > Width box
    • Please post a screenshot of Main options > Menus > Primary Menu Bar > Primary menu bar BG box
    #69169
    merlojh
    Participant

    This is what I have

    Menu Bar BG: Primary Menu Bar  Transparent

    Header HTML Width: 90%

    Header HTML Header HTML BG: Transparent Width: 90%@media only screen and (max-width: 600px) {
    .is-mobile #header-html div {float:none !important;text-align:center;}
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:30px;}
    }

    #69170
    scrambler
    Moderator

    Then your installation is broken and not updating the settings.

    Do you have a cache plugin? if so clear and deactivate.

    Do you have an optimization  plugin (js and CSS), or an optimization option in another plugin like Jetpack, if so Deactivate.

    if that does not fix it, then deactivate ALL non weaver plugin and see if that fixes it.

    And by the way, I remember we ran into similar issues in your last thread below. Did you ever find what was screwing things up then?

    header text – Weaver Support Forum (weavertheme.com)

     

    #69171
    merlojh
    Participant

    Do not have any of the plugins you mentioned but I did deactivate plugins did not work not sure what to do? No the last thread just gave up. Should I reinstall a new template I am using weaver-xtreme-plus-4-0.zip. John

    #69172
    scrambler
    Moderator

    The thing you can try is the following.

    1. Save your settings and Download a copy on your computer for good measure.
    2. Switch to a different theme.
    3. Delete Weaver Xtreme Theme
    4. Deactivate and delete Weaver Xtreme Theme support plugin
    5. Deactivate and delete Weaver Xtreme PLUS plugin.
    6. Deactivate and delete any other weaver plugin like slider and showposts if you have them
    7. Then reinstall Weaver Xtreme Theme From WordPress.org and Activate.
    8. Then Reinstall Weaver Xtreme Theme Support Plugin and Activate
    9. Then reinstall any other weaver plugin you had like showposts and slider from WordPress.org and activate.
    10. Then Download a fresh copy of the Xtreme PLUS plugin from your weaver account, Then install it and activate.

    Then see if when you change an option it works.

    #69173
    merlojh
    Participant

    Did all above still looks the same? What to do now? John

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