Home Forums Weaver Xtreme Theme mobile view

Viewing 16 posts - 17 through 32 (of 53 total)
  • Author
    Posts
  • #69174
    scrambler
    Moderator

    Please copy paste the full content of your CSS rule box here, you have a LOT of CSS errors on your site, I need to see if they are in your CSS box or not.

    Once you paste it, select it and give it the Preformatted paragraph style so it does not get changed by the forum editor

    #69175
    merlojh
    Participant

    Nothing works in main options if I try to click on something does not work?? John

    #69176
    merlojh
    Participant

    Maybe I need to delete the whole word press and do another reinstall?

    #69177
    scrambler
    Moderator

    First let us check the CSS as I told you, because if it is full of errors inside your CSS box that could be the cause of the problem

    #69178
    merlojh
    Participant

    As I told you when I click on anything it does not work so can not get into css? I think this whole site is bad. John

    #69179
    scrambler
    Moderator

    Sorry missed that.

    When you switch to a different theme, can you access the various options?

    Reinstalling everything should be done with the help of your host provider, because you need to backup your Database and restore it, or you will lose all the site content.

    What I hope is that the database is not corrupted, may be you can ask you host provider to check that too.

    If there is no site content to preserve, then you could indeed start from scratch

    #69180
    merlojh
    Participant

    Sorry I forgot to add theme support so here is the css

    /* BLOG PAGE */
    .bloglink { padding-left: 10%; }

    /* HOME PAGE */
    .narrowcol { padding-right:10%; padding-left: 10%; }
    #mybackground-one { background-color: gray; padding: 15px 15px 15px 15px; }
    .mydiv1 {padding:10px; width:100%; background-color:#9999; box-sizing:border-box; }
    .hplink { padding-left: 3%; }
    .center { text-align: center; }
    .page-id-491 .fluid-width-video-wrapper { width:25%; }
    .page-id-491 .fluid-width-video-wrapper {margin:0 auto;}
    .bgcolor {
    width: 8%;
    height: 100%;
    background-color: green;
    padding: 5px 5px 5px 5px;
    text-align: center;
    }
    .is-mobile .bgcolor {font-size: 80%; width: 20%;}
    .colone { width: 40%;}
    .coltwo width: 20%;{}
    .colthree width: 40%;{}
    .mypar1 {text-align:center; padding-bottom: 125px; font-size: 200%; margin-top: -25px;}

    .colorbg { background-color: #4874AC; border-radius: 3%; color: white; padding-bottom: 2%; padding-top: 2%; }

    /* FONTS */
    h3 { color: #4874AC; }

    /* ABOUT PAGE */
    #aboutcol { width: 80%; padding-left: 10%; padding-right: 10%; }
    .smallcol { width: 20%; }
    .largecol { width: 80%; }

    /* INVESTMENT PAGE */
    #investmentcol { width: 80%; padding-left: 10%; padding-right: 10%; }

    /* CONTACT PAGE */
    .wpforms-form { background-color: #CCCCCC; padding: 15px 15px 15px 15px; border-radius: 3%; }
    #contactcol { width: 80%; padding-left: 10%; padding-right: 10%; }

    /* TEXT FOR HEADER */
    .menu-primary {position:absolute;top:0;}
    #headerlink { color: white;}
    .toptext { font-size: 80%; font-family: “Times New Roman”, Times, serif; }
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:3%;}
    .button {padding:0.5% 24px;}N
    #branding #header-image img {min-height:200px;}
    @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) {
    .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;}
    }

    /* BUTTONS */
    .button {
    background-color: green;
    border: none;
    color: white;
    padding: 8px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;;
    }

    a.button { color: white; }

    a:hover.button {
    color: pink;
    }

    /*-style for 4 columns on desktop*/
    .content-4-col {float:left;width:25%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    /*-Change to 2 columns on small tablets*/
    .is-smalltablet .content-4-col {width:50%;}
    /*-Change to 1 columns on Phones*/
    .is-phone .content-4-col {width:100%;}
    /*-sets the line breaks*/
    :nth-of-type(4n+1).content-4-col {clear:left;}
    .is-smalltablet :nth-of-type(4n+1).content-4-col {clear:none;}
    .is-smalltablet :nth-of-type(2n+1).content-4-col {clear:left;}

    #69181
    scrambler
    Moderator

    List of errors in your CSS file

    /* HOME PAGE */
    Property not inside brackets, please fix
    .coltwo width: 20%;{}
    .colthree width: 40%;{}

    /* TEXT FOR HEADER */
    Bad double quotes in font family (asymetrical > retype)
    This may not be in your CSS file but have been caused by the copy pasting (I told you to format the pasted CSS with “Preformatted”!!
    .toptext { font-size: 80%; font-family: “Times New Roman”, Times, serif; }

    /* TEXT FOR HEADER */
    Dash instead of minus sign in calc property > Retype the minus sign (in blue highlight)
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:3%;}

    Bad character (N) > remove
    .button {padding:0.5% 24px;}N

    Duplicated @media rule, and the first one is bad with Missing closing bracket on the @media rule AND dash instead of minus in calc property
    (HOW MANY TIMES HAVE I ASKED YOU TO CORRECT THIS…)
    Just DELETE the first part in yellow highlight, AND retype the Minus Sign in the calc property (blue highlight)

    @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) {
    .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;}
    }

    I should not have to do your job for you John.
    I told you a million times to run your CSS through a validator and fix errors…

    Once you think you have fixed them all, Copy and paste the CSS here again, And please use the “preformatted” paragraph Style from the forum post editor toolbar!! so I can make sure

    #69182
    merlojh
    Participant

    Could not find this one – Bad character (N) > remove .button {padding:0.5% 24px;}N

    Looks like the button is back but header still needs work.

    /* BLOG PAGE */
    .bloglink { padding-left: 10%; }

    /* HOME PAGE */
    .narrowcol { padding-right:10%; padding-left: 10%; }
    #mybackground-one { background-color: gray; padding: 15px 15px 15px 15px; }
    .mydiv1 {padding:10px; width:100%; background-color:#9999; box-sizing:border-box; }
    .hplink { padding-left: 3%; }
    .center { text-align: center; }
    .page-id-491 .fluid-width-video-wrapper { width:25%; }
    .page-id-491 .fluid-width-video-wrapper {margin:0 auto;}
    .bgcolor {
    width: 8%;
    height: 100%;
    background-color: green;
    padding: 5px 5px 5px 5px;
    text-align: center;
    }
    .is-mobile .bgcolor {font-size: 80%; width: 20%;}
    .colone { width: 40%;}
    .coltwo {width: 20%;}
    .colthree {width: 40%;}
    .mypar1 {text-align:center; padding-bottom: 125px; font-size: 200%; margin-top: -25px;}

    .colorbg { background-color: #4874AC; border-radius: 3%; color: white; padding-bottom: 2%; padding-top: 2%; }

    /* FONTS */
    h3 { color: #4874AC; }

    /* ABOUT PAGE */
    #aboutcol { width: 80%; padding-left: 10%; padding-right: 10%; }
    .smallcol { width: 20%; }
    .largecol { width: 80%; }

    /* INVESTMENT PAGE */
    #investmentcol { width: 80%; padding-left: 10%; padding-right: 10%;}

    /* CONTACT PAGE */
    .wpforms-form { background-color: #CCCCCC; padding: 15px 15px 15px 15px; border-radius: 3%; }
    #contactcol { width: 80%; padding-left: 10%; padding-right: 10%; }

    /* TEXT FOR HEADER */
    .menu-primary {position:absolute;top:0;}
    #headerlink { color: white;}
    .toptext { font-size: 80%; font-family: Times, serif; }
    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw); padding-right:15%; padding-left:15%; padding-top:3%;}
    .button {padding:0.5% 24px;}N
    #branding #header-image img {min-height:200px;}

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

    /* BUTTONS */
    .button {
    background-color: green;
    border: none;
    color: white;
    padding: 8px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;;
    }

    a.button { color: white; }

    a:hover.button {
    color: pink;
    }

    /*-style for 4 columns on desktop*/
    .content-4-col {float:left;width:25%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    /*-Change to 2 columns on small tablets*/
    .is-smalltablet .content-4-col {width:50%;}
    /*-Change to 1 columns on Phones*/
    .is-phone .content-4-col {width:100%;}
    /*-sets the line breaks*/
    :nth-of-type(4n+1).content-4-col {clear:left;}
    .is-smalltablet :nth-of-type(4n+1).content-4-col {clear:none;}
    .is-smalltablet :nth-of-type(2n+1).content-4-col {clear:left;}

    #69183
    scrambler
    Moderator

    “Could not find this one – Bad character (N) > remove”

    .button {padding:0.5% 24px;}N

    Are you blind (in blue)?

    And your site is not accessible

    #69184
    merlojh
    Participant

    Found it now the only thing is the header area. I turned of the under construction.

    So sorry but I have a hard time seeing sometimes since I have Macular Degeneration in one eye.

    Thanks so much John

    #69185
    scrambler
    Moderator

    Sorry to hear about your condition.

    OK, so we have a number of things to change, please make sure you do them all.

    1- Right now you have both the Header HTML AND the primary menu Background set to “transparent”
    We need to change that because it doe not work for mobile.
    So go back and set the background color of BOTH Header HTML Area AND Primary menu bar to your blue color

    2- Also, setting the Width of the Header HTML to 90% will not look good on mobile, so set the width of the header HTML area back to 100%

    3-Then add the rules below to you theme Global Custom CSS Rule box
    #branding #header-html {display:block;overflow:hidden;max-width:1000px;}
    .is-desktop .menu-primary .wvrx-menu-container {background-color:transparent;}

    And let us take it from there

    Please make sure you don’t damage the CSS as you add the rules.

    #69186
    merlojh
    Participant

    OK done if possible could the button be centered under the text thanks John

    #69187
    scrambler
    Moderator

    Change the HTML for the button from

    <div style="float:right;">

    to

    <div style="text-align:center;">
    

    But you have not done all I asked, and so when the browser gets between 768 and 581 (tablet), the mobile menu does not look good

    Up to you

    #69188
    merlojh
    Participant

    I think I got it all now so how do I separate the menu from the box with text? Also I do not know how to remove the basic header for the articles blog page? What happened now that I uploaded Weaver Xtreme Plus everything I did is gone?? Buttons where there now they are not this is very frustrating.

    #69189
    scrambler
    Moderator

    I am not sure what you are saying, the button is there.

    Now if you want both the text and the button to be centered on top of eachother, you need to modify the HTML inside the header HTML box too look like below, removing the float left on the first div, removing the float right on the second one, and adding the text-align center and a clear property

    <div id="header-html" class="rounded-all font-inherit align-center">
    <div class="toptext">
    <a id="headerlink" href="http://www.danedwardsinvestments.com/"><center>Dan Edwards Investments<br>
    Helping Women in Transition Become Financially Secure</center></a><br>
    </div>
    <div style="text-align: center;clear: both;"><a class="button" href="http://www.danedwardsinvestments.com/contact/">Schedule an appointment</a>
    </div>
    </div>

    Also, in your existing rule below, you need to replace the padding-top on the text to 30px instead of 3% (changes in yellow), so it looks good on tablet.

    And if you want some space on each side of the blue box, Add the MAx-width and the display block as shown in blue below

    #header-html {font-size:calc(16px + 1.8vw);top:30%;top:calc(30% – 3vw);padding-right:15%;padding-left:15%;padding-top: 30px;max-width:1000px;display:block !important;}

     

     

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