Homepage › Community Forums › Aspire Theme Support › Button placed outside site-inner
This might be somewhat off topic but ive been struggling with this for hours and cant find the solution to something that must be pretty simple..
Can anyone tell me why the button down below is being pushed outside site inner?
(its supposed to be centered below the two colums)
https://tandarts-haarlem.nl/haarlem-zuid-centrum
<p>Een tandarts voor uzelf, uw kinderen of ouders;
Onze tandartspraktijk is gelegen op de grens van Haarlem centrum en Haarlem zuid.</p>
<div class="one-half first">
<div class="left-content"><i class="fa fa-compass fa-2x"></i></div>
<div class="right-content"><h3>Vaste tandarts</h3>
In onze praktijk voert steeds dezelfde tandarts de regie over de aan u geboden zorg.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-comments-o fa-2x"></i></div>
<div class="right-content"><h3>Wij nemen de tijd om te luisteren</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half first">
<div class="left-content"><i class="fa fa-diamond fa-2x"></i></div>
<div class="right-content"><h3>Global Support</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-smile-o fa-2x"></i></div>
<div class="right-content"><h3>Cosmetische tandheelkunde</h3>
Om het u makkelijker te maken ons buiten werktijd te bezoeken zijn wij op donderdagavond tot 21u geopend.</div>
</div>
<div class="one-half first">
<div class="left-content"><i class="fa fa-thumbs-o-up fa-2x"></i></div>
<div class="right-content"><h3>Global Support</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-clock-o fa-2x"></i></div>
<div class="right-content"><h3>Avondopening</h3>
Om het u makkelijker te maken ons buiten werktijd te bezoeken zijn wij op donderdagavond tot 21u geopend.</div>
</div>
<p class="center" style="text-align: center;"><a class="button large" href="https://tandarts-haarlem.nl">Klik hier voor meer informatie</a></p>
<!--formatted-->
To clarify;
all of the above code is written inside wordpress
I cut and pasted your code to my website and it works perfectly.
Have you cleared your cache? I don’t see any issue.
Hi Andy,
thanks for taking a look!
Have you checked also on a wider (desktop) screen?
On my side it works fine on smaller viewports when everything is placed in one single column.
But on wider screens the button gets misplaced.
(I have cleared the cache btw)
<p style="text-align: center;">Een tandarts voor uzelf, uw kinderen of ouders;
Onze tandartspraktijk is gelegen op de grens van Haarlem centrum en Haarlem zuid.</p>
<div class="one-half first">
<div class="left-content"><i class="fa fa-compass fa-2x"></i></div>
<div class="right-content"><h3>Vaste tandarts</h3>
In onze praktijk voert steeds dezelfde tandarts de regie over de aan u geboden zorg.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-comments-o fa-2x"></i></div>
<div class="right-content"><h3>Wij nemen de tijd om te luisteren</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half first">
<div class="left-content"><i class="fa fa-diamond fa-2x"></i></div>
<div class="right-content"><h3>Global Support</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-smile-o fa-2x"></i></div>
<div class="right-content"><h3>Cosmetische tandheelkunde</h3>
Om het u makkelijker te maken ons buiten werktijd te bezoeken zijn wij op donderdagavond tot 21u geopend.</div>
</div>
<div class="one-half first">
<div class="left-content"><i class="fa fa-thumbs-o-up fa-2x"></i></div>
<div class="right-content"><h3>Global Support</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="one-half">
<div class="left-content"><i class="fa fa-clock-o fa-2x"></i></div>
<div class="right-content"><h3>Avondopening</h3>
Om het u makkelijker te maken ons buiten werktijd te bezoeken zijn wij op donderdagavond tot 21u geopend.</div>
</div>
<p class="center" style="text-align: center;"><a class="button large" href="https://tandarts-haarlem.nl">Klik hier voor meer informatie</a></p>
<!--formatted-->
This works perfectly on three of my Genesis themes (including Appfinite’s Epik and Legacy). Used on a blank web page, and in a text widget for the home page. Everything lines up perfectly. You may have additional code on your page.
Try placing this in a text widget with no other code, and put it into one of your widget containers. There is nothing wrong with your code, it produces perfectly.
Right.. i see you’re right.
The code works fine on any page template BUT the (aspire pro) landing page.
I cant grasp why though..
The only css i added to style.css referring to the landing page is
/* landing page */
.landing-page .site-inner {
max-width: 1024px;
margin-top: 40px;
text-align: center;
}
page_landing.php is untouched
I added your code to the landing page and tried it on my theme…still functions perfectly.
Don’t know what..but I just went to your web via the above link. Your page is perfect.
Blue button at bottom is dead center, and everything is as it should be.
Are you using Chrome browser? I have installed a Cache Killer…because Chrome is terribly aggressive and it really confounds updating/refreshing.
I am using a 27 inch monitor. Pretty big resolution.
Tja, im out of ideas..
This is what the page looks like when using standard full width template
(notice featured image + page title aligned to the left)
This is what the page looks like when using landing page template
(notice every element centered, except for the button which gets pushed to the side)
It’s showing up fine on my end as well – http://i.imgur.com/Vl4o4sY.png
Is that how it’s supposed to look?
Hi Wes,
yeah im trying to get the button centered as well.
And i can see it being rendered in that spot initially, but the upon page completion the button moves to the side
the “edit” links seems to be in a weird spot as well..
Andy – yeah im on a chrome browser.
I just checked and to make it even more intresting firefox is also rendering the button out of place, but less so than chrome..
No idea why youre not seeing it on your side..
I’ve just cleared all the caches on the website, maybe that makes a difference to what youre seeing.
Another intresting observation;
i have the genesis share buttons installed but disabled on this landing page.
When i do show them, they appear off centre as well but the “edit” link moves back to the center a line below
And Safari (which i never use) renders the page exactly like firefox;
share buttons underneath the right collumn, green button to the right of the two collumns
Really appreciate your help guys,
i’ll see if i can eliminate the issue by disabling a plugin or smt..
Seems to me its something wordpress or plugin related
To close this off;
I changed the paragraph containing the button to
<p>
<div style=clear:both>
<a class="button large" href="https://tandarts-haarlem.nl">Klik hier voor meer informatie</a>
</div></p>
That solved the problem =D
Ah, it was probably missing a Closing Tag in the HTML….OR it needed a div that cleared the section off clear: both;
.
Let me know if anything else pops up.