mobile view

[scrambler]

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

[merlojh]

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

[merlojh]

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

[scrambler]

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

[merlojh]

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

[scrambler]

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

[merlojh]

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

[scrambler]

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

[merlojh]

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

[scrambler]

“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

[merlojh]

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

[scrambler]

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.

[merlojh]

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

[scrambler]

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

[merlojh]

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.

[scrambler]

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

 

 

[Author]

Posts