Infinity Pro: Very weird page problem

[Boblebad]

I'm having the weirdest problems with my site/page.

When i went to bed last night, everything was just fine. My added custom page showed just fine as i always has(since i got it working), but this morning when opening the page the layout was completely messed up.

I have four widgets on my page. But only two and three was showing now. And i hadn't changed anything before going to bed. But, i checked all my files and couldn't find any errors.

Then i thought, "hmm, should i try adding a new page and add the template anew ?"

And now the weirdness starts. Suddenly all my widgets are showing on the page and the layout is as it should be - i thought.

But the page displays all my widget areas and therefor my four widgets two times. First one to four, and then again one to four.

What in the world is going on. How can my page show eight widget areas when i have only four registered ??

And most of all, what do i do to fix this weird issue ?

All the best
Carsten

[Boblebad]

Very weird. The site/page inserts my four widget ares as separate pages after the widget areas: http://postimg.org/image/5oe22sxxp/

[Boblebad]

Update: Only a few minutes after updating this post, WordPress lost the page again. It's like it can't hold on to the template. Yes i know it sounds weird, but it's actually what's happening.

So now i did the same again. New page and added the template again. But know it messes up my first widget area, where the last four widget doesn't float left as they should - and as they did before i went to bed.

[Victor Font]

I don't know that there's anyway to help with this problem without seeing the code.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Boblebad]

Sorry for not posting the code, but i did not think it was needed be course it was some weird WordPress/Infinity Pro problem that it could not hold on to the template under the page settings.

But now it seams to stay that way, that the widgets don't group.

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Gratis<span>0,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>         
        <ul>
            <li><b>Evigt</b> - GRATIS</li>
            <li><b>Kun</b> søge</li>
            <li><b>Kun</b> se profiler</li>
            <li><b>Ikke</b> skrive eller svare</li>
			<li><b>Ikke</b> deltage</li>			
        </ul> 
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan" id="most-popular">
        <h3>Aktiv<span>109,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>        
        <ul>
            <li><b>1 Måned</b> - DKK 109</li>
            <li><b>Fuld</b> adgang til alt</li>
            <li><b>SoulMatching</b></li>
            <li><b>Skrive</b> beskeder og chatte</li>
			<li><b>Deltage</b> aktivt</li>			
        </ul>    
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Passiv<span>59,-</span></h3>
		<a class="signup" href="http://www.website.com/join">Opret</a>
        <ul>
            <li><b>1 Måned</b> - DKK 59</li>
            <li><b>Begrænset</b> adgang</li>
            <li><b>SoulMatching</b></li>
            <li><b>Kun</b> svare beskeder og chat</li>
			<li><b>Passiv</b> deltagelse</li>			
        </ul>
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>3 Dage<span>39,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>		
        <ul>
            <li><b>3 Dage</b> - DKK 39</li>
            <li><b>Fuld</b> adgang til alt</li>
            <li><b>SoulMatching</b></li>
            <li><b>Skrive</b> beskeder og chatte</li>
			<li><b>Deltage</b> aktivt</li>			
        </ul>    
    </div>
</div>

The CSS for the pricing table is here: https://codepen.io/arkev/pen/EDeuG

I have changed the wideness and to percent on the single price blocks:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 960px;  /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #FAF5EB;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 23.958333333333333%; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

And the CCS for the widget area:

.price-page-1 .flexible-widgets .widget {
	float: left;
	margin-bottom: -20px;
	padding-left: 10px;
	padding-right: 10px;
}

.price-page-1 {
	padding-bottom: 100px;
	padding-top: 100px;
	text-align: center;
}

.price-page-1 .widget-full .wrap {
	max-width: 960px;
}

.price-page-1,
.price-page-1 a,
.price-page-1 p,
.price-page-1 .featured-content .entry-title a,
.price-page-1 .widget-title {
	color: #fff;
}

.price-page-1 p {
	font-size: 30px;
	font-size: 3rem;
	line-height: 1.75;
}

.price-page-1 p:last-child {
	margin-bottom: 0;
}

.price-page-1 button:focus,
.price-page-1 button:hover,
.price-page-1 input:focus[type="button"],
.price-page-1 input:hover[type="button"],
.price-page-1 input:focus[type="reset"],
.price-page-1 input:hover[type="reset"],
.price-page-1 input:focus[type="submit"],
.price-page-1 input:hover[type="submit"],
.price-page-1 .textwidget a.button:focus,
.price-page-1 .textwidget a.button:hover {
	background-color: #000;
	border: none;
	color: #fff;
}

And the flexible widgets area:

.flexible-widgets .widget {
	float: left;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.flexible-widgets.widget-full .widget {
	padding-left: 0;
	padding-right: 0;
}

.flexible-widgets .widget:last-of-type {
	margin-bottom: 0;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-area .widget:nth-of-type(1),
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
	width: 100%;
}

.flexible-widgets.widget-fourths .widget {
	width: 25%;
}

.flexible-widgets.widget-halves .widget {
	width: 50%;
}

.flexible-widgets.widget-thirds .widget {
	width: 33.33%;
}

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2) {
	clear: left;
}

And again, it all worked just fine before WordPress/Infinity Pro couldn't hang on to the template settings. And that is really something i don't understand and also have never experienced before.

[Boblebad]

I have no idea how this got like that. I have never bin walking in my sleeps, and i surly have never operated a computer in my sleep. (Well, when i was younger i attended a lan-party, one time didn't sleep a whole weekend, but i would say, operating my computer - no, not at all, couldn't combine words to a sentence 😉 🙂

But this weird thing happened over night and i have no clue to how. I went back and started to compare files from the orig Infinity Pro zip and the ones i got that just stopped working. Somehow .flexible-widgets found its place in the code below. I can tell you, if that's there, it will _not_ work 😉

.price-page-1 .flexible-widgets .widget {
	float: left;
	margin-bottom: -20px;
}

Then i changed two sizes in here:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 230px;  /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #FAF5EB;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 100%; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

Removed some padding, that actually was needed before, and then it worked.

This will stay as a mystery to me, but i'll stop twisting my head how. I have much more things i need to do with my site 🙂

So this is "roger, over and out" 🙂

[Author]

Posts