[BlakeN]

I'd also like to know how to do this.

[BlakeN]

That did it! Thank you

It looks decent without having the whole site with the bar at the bottom but for some reason when I add .home to the front of the code it stops working. Either way I'm happy. Appreciate it.

[BlakeN]

That worked!!!

Thanks so much again. That was driving me crazy.

[BlakeN]

Sorry to be a burden but I followed your directions from the prior reply and inserted at the bottom of 1023px section. I'm not sure why it's still rendering the way it is.

I even tried dropping it at the top of the section with the same results.

@media only screen and (max-width: 1023px) {
.site-inner,
.footer-widgets .one-fourth h3 {
margin-top: 40px;
}
.footer-widgets .first h3 {
margin-top: 0px;
}
.wrap {
max-width: 768px;
}
.secondary-nav .site-inner {
margin-top: 80px;
}
.front-page .site-inner {
max-width: none;
}
.site-header {
position: static;
}
.front-page .site-header {
background-color: #000;
}
.front-page .site-header > .wrap {
border: none;
}
.content,
.sidebar,
.site-header .widget-area,
.title-area {
width: 100%;
}
.site-header .title-area,
.site-header.dark .title-area {
padding: 15px 0;
}
.header-image .dark .site-title > a {
height: 76px;
}
.genesis-nav-menu,
.site-header .widget-area,
.site-title {
text-align: center;
}
.header-image .site-title > a {
background-position: center !important;
}
.nav-primary .genesis-nav-menu {
float: none;
}
.nav-secondary,
.site-header.dark .nav-secondary {
border-bottom: none;
}
.genesis-nav-menu a,
.site-header.dark .genesis-nav-menu a {
padding: 10px;
}
.front-page .site-inner {
margin-top: 0;
}
.site-inner {
margin-top: 80px;
}
.full-width-content .content {
padding: 0;
}
.full-width-content img.pull-left {
margin-left: 0;
}
.full-width-content img.pull-right {
margin-right: 0;
}
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget,
.flexible-widgets.widget-fourths .widget {
margin: 0 auto 20px;
width: 100%;
}
.front-page-1 .widget:first-of-type h4,
.front-page-2 .widget:first-of-type h4 {
font-size: 60px;
}
.front-page-1 .image-section,
.secondary-nav .front-page-1 .image-section {
padding-top: 0;
}
}

@media only screen and (max-width: 800px)

[BlakeN]

I read through the inspect tool tutorial and dropped the code as specified in the last reply but it's still rendering as strangely on desktop.

@media only screen and (max-width: 1200px) {
.site-inner,
.wrap {
max-width: 960px;
}
.site-header .widget-area {
width: 580px;
}
.content {
width: 520px;
}
.full-width-content .content {
padding: 0 110px;
}
.genesis-nav-menu a {
padding: 30px 10px;
}
.site-header.dark .genesis-nav-menu a {
padding: 20px 10px;
}
.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {
background-attachment: scroll;
}
}

@media only screen and (max-width: 1023px) {
.site-inner,
.wrap {
max-width: 768px;
}
.secondary-nav .site-inner {
margin-top: 80px;
}
.front-page .site-inner {
max-width: none;
}
.site-header {
position: static;
}
.front-page .site-header {
background-color: #000;
}
.front-page .site-header > .wrap {
border: none;
}
.content,
.sidebar,
.site-header .widget-area,
.title-area {
width: 100%;
}
.site-header .title-area,
.site-header.dark .title-area {
padding: 15px 0;
}
.header-image .dark .site-title > a {
height: 76px;
}
.genesis-nav-menu,
.site-header .widget-area,
.site-title {
text-align: center;
}
.header-image .site-title > a {
background-position: center !important;
}
.nav-primary .genesis-nav-menu {
float: none;
}
.nav-secondary,
.site-header.dark .nav-secondary {
border-bottom: none;
}
.genesis-nav-menu a,
.site-header.dark .genesis-nav-menu a {
padding: 10px;
}
.front-page .site-inner {
margin-top: 0;
}
.site-inner {
margin-top: 80px;
}
.full-width-content .content {
padding: 0;
}
.full-width-content img.pull-left {
margin-left: 0;
}
.full-width-content img.pull-right {
margin-right: 0;
}
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget,
.flexible-widgets.widget-fourths .widget {
margin: 0 auto 20px;
width: 100%;
}
.front-page-1 .widget:first-of-type h4,
.front-page-2 .widget:first-of-type h4 {
font-size: 60px;
}
.front-page-1 .image-section,
.secondary-nav .front-page-1 .image-section {
padding-top: 0;
}
.footer-widgets .one-fourth h3 {
margin-top: 40px;
}
.footer-widgets .first h3 {
margin-top: 0px;
}
}

[BlakeN]

I read through the tutorial on the inspect tool and followed the instructions from your most recent reply but the desktop version is still spaced strangely.

Sorry to be a burden. Here is what it looks like:

@media only screen and (max-width: 1200px) {
	.site-inner,
	.wrap {
		max-width: 960px;
	}
	.site-header .widget-area {
		width: 580px;
	}
	.content {
		width: 520px;
	}
	.full-width-content .content {
		padding: 0 110px;
	}
	.genesis-nav-menu a {
		padding: 30px 10px;
	}
	.site-header.dark .genesis-nav-menu a {
		padding: 20px 10px;
	}
	.front-page-1,
	.front-page-3,
	.front-page-5,
	.front-page-7 {
		background-attachment: scroll;
	}
}

@media only screen and (max-width: 1023px) {
	.site-inner,
	.wrap {
		max-width: 768px;
	}
	.secondary-nav .site-inner {
		margin-top: 80px;
	}
	.front-page .site-inner {
		max-width: none;
	}
	.site-header {
		position: static;
	}
	.front-page .site-header {
		background-color: #000;
	}
	.front-page .site-header > .wrap {
		border: none;
	}
	.content,
	.sidebar,
	.site-header .widget-area,
	.title-area {
		width: 100%;
	}
	.site-header .title-area,
	.site-header.dark .title-area {
		padding: 15px 0;
	}
	.header-image .dark .site-title > a {
		height: 76px;
	}
	.genesis-nav-menu,
	.site-header .widget-area,
	.site-title {
		text-align: center;
	}
	.header-image .site-title > a {
		background-position: center !important;
	}
	.nav-primary .genesis-nav-menu {
		float: none;
	}
	.nav-secondary,
	.site-header.dark .nav-secondary {
		border-bottom: none;
	}
	.genesis-nav-menu a,
	.site-header.dark .genesis-nav-menu a {
		padding: 10px;
	}
	.front-page .site-inner {
		margin-top: 0;
	}
	.site-inner {
		margin-top: 80px;
	}
	.full-width-content .content {
		padding: 0;
	}
	.full-width-content img.pull-left {
		margin-left: 0;
	}
	.full-width-content img.pull-right {
		margin-right: 0;
	}
	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	.flexible-widgets.widget-full .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget,
	.flexible-widgets.widget-fourths .widget {
		margin: 0 auto 20px;
		width: 100%;
	}
	.front-page-1 .widget:first-of-type h4,
	.front-page-2 .widget:first-of-type h4 {
		font-size: 60px;
	}
	.front-page-1 .image-section,
	.secondary-nav .front-page-1 .image-section {
		padding-top: 0;
	}
	.footer-widgets .one-fourth h3 {
    margin-top: 40px;
	}
	.footer-widgets .first h3 {
    margin-top: 0px;
	}
}

[BlakeN]

I tried both methods.

Method one (Changing Style Sheet) resulted in strange footer spacing on the desktop version.

Method two (Changing Function.php) resulted in the the four blocks stacked vertically rather than lining up at the bottom.

[BlakeN]

Okay I've removed the CSS minification and inspected the code but am still unsure of where to add the margin top/bottom value.

[BlakeN]

The problem is not the width but rather the spacing from one column to the next.

Since they're stacked in the mobile view the last line of the previous column and the first line of the following column are stacked right on top of each other without any spacing so it's extremely difficult to differentiate the text.

Ex) "Tampa, FL 33607" is sitting right on top of "About Us"

I tried using 4 custom HTML widgets but then the desktop version has them stacked vertically.

[BlakeN]

The main problem is not with the desktop site. It's with the spacing on the mobile site.

"Please take a look at the footer on a cell phone and you will see what I'm referring to."

[BlakeN]

No it hasn't been changed since I posted.

I still need help resolving.

[BlakeN]

Thanks

[BlakeN]

For those reading this chain I wanted to point out a solution.

W3TC had been previously implemented and was removed but it still remained in htaccess and had to be removed.

Same scenario for cloudflare. These two were causing multiple issues.

Cloudflare is SSL compatible but bluehost does not allow you to utilized their shared ssl so you would have to use a paid version.

Basically check any CDNs, remove any caching plugins, implement really simple ssl and search and replace plugins, and make sure you htaccess is clean.

[BlakeN]

I really appreciate the help here but am still perplexed as to what is going on.

If you run whynopadlock on the site it lists a slew of errors.
https://www.whynopadlock.com/results/a53bd93f-5d04-4d30-b073-86586575daba

After running Search and Replace on all databases and there are no more instances of HTTP.

The htaccess has not been 301'ed to the https version and I've used really simple SSL to force js redirection to ssl.

I'm exhausting every possible cause here. If there is anything that you may believe could possibly work please let me know.

[BlakeN]

I actually previously forced HTTPS in the htaccess with a redirect and it broke the site. The CSS was not rendering correctly and it looked like a plain text site so I switched back.

After reaching out to Bluehost they said that it needed to be fixed on the web development end then when I forced the htaccess to push the https version the css would not break.

[BlakeN]

Thank you for the help.

I still believe we should have a medium to report spam and users to be blocked that does not stem from a "general discussion" topic or something of the sort.

It would be much easier on both of you and given the volume of topics in these forums no one would expect either of you to catch the bulk of it.

[BlakeN]

Removing the code did it.

Thanks

[BlakeN]

This reply has been marked as private.

[BlakeN]

Brad I've been playing with it and nearly have it there. Initially I did not use the genesis archive page php to start with and I'm not sure what was missing but it seems to be on track now.

Thanks again for all the help.

[BlakeN]

/public_html/wp-content/themes/wellness-pro

In the root theme folder as the post instructed. Same location as style.css, front-page.php, etc.

[Author]

Posts