Button placed outside site-inner

This topic has 12 replies, 3 voices, and was last updated 7 years, 1 month ago by Wes.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts

March 4, 2017 at 5:28 pm #20757

Customer

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

March 4, 2017 at 6:58 pm #20758

Andykev

Customer

I cut and pasted your code to my website and it works perfectly.

Have you cleared your cache? I don’t see any issue.

March 5, 2017 at 5:53 am #20761

BartA

Customer

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)

March 5, 2017 at 2:17 pm #20763

Andykev

Customer

<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.

March 5, 2017 at 2:41 pm #20764

BartA

Customer

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

March 5, 2017 at 2:50 pm #20765

Andykev

Customer

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.

March 5, 2017 at 3:12 pm #20766

BartA

Customer

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)

standard full width template, button aligned correctly

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)

landing page template; button gets pushed to the side

March 5, 2017 at 3:13 pm #20767

Wes

Moderator

It’s showing up fine on my end as well – http://i.imgur.com/Vl4o4sY.png

Is that how it’s supposed to look?

March 5, 2017 at 3:19 pm #20768

BartA

Customer

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..

March 5, 2017 at 3:44 pm #20769

BartA

Customer

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

March 5, 2017 at 3:55 pm #20770

BartA

Customer

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

March 5, 2017 at 6:34 pm #20773

BartA

Customer

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

March 7, 2017 at 12:04 pm #20803

Wes

Moderator

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.

Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.