Hi there X team,
The problem is self evident:
All my blog post previews are being pushed to the right hard,
I’m not sure how to fix this. Plz help
John
Hello There,
Thanks for writing in! It seems that you have inserted an invalid html code in your site that broke your layout. You added this in your topbar content:
<span class="phone">Phone: <span class="phone-number"><a href="tel:1-517-712-9811">517-712-9811</a></span><br>Email: <a class= "phone-number" style="font-size: .8em;" href="www.tomandjerrysestateservices.com/contact">Contact@TomAndJerrysEstateServices.com
The correct code should be:
<span class="phone">Phone: <span class="phone-number"><a href="tel:1-517-712-9811">517-712-9811</a></span><br>Email: <a class= "phone-number" style="font-size: .8em;" href="www.tomandjerrysestateservices.com/contact">Contact@TomAndJerrysEstateServices.com</a></span>
If you have any other codes that you added on the page, please make sure that your close the respective tags.
Please let us know how it goes.
Thanks for the help.
So I added the refined code above and I’m still getting the blog post items being pushed off to the site:
Any other ideas on what might be causing this?
Thanks for the continued support!
John
Hey John,
The cause of the issue is your overflowing logo.
There’s a small solution to that and that is to make the x-brand absolute positioned using this code.
.x-brand {
position: absolute;
}
However, it will cause some issue on mobile nav.
It’s technically possible to fix that using the code below but as you can see, a solution to a problem might lead to another problem because X Header or the Classic Header was not designed to handle this logo overflow effect. This is achievable in Pro Header Builder and this is the reason why there’s Pro to give users header and footer design flexibility. Please consider switching to Pro as the codes I provided you serve only as a guide and there could be more unforeseen issues that could result from using it and we do not support customization issues and further enhancement.
.x-nav-wrap.mobile {
position: absolute;
top: 125px;
width: 100%;
background: white;
}
Thank you for understanding.
Hi Guys thanks for the help,
So I’ve cleaned my css of all the postion rules and changed my logo to get rid of the overflow the blog posts are still being pushed to the right.
I’m trying to get rid of that and just have the function like a standard X web site (a side from a few color and style changes)
I tried to get rid of all the CSS and just have it be a standard site, and the blog post were still being pushed to the right.
At this point I’m not even sure what is causing this any more can you take another look at let me know what you think is up. Thx
John
Hi John,
I’ve tried to log in your website but I got the message that I’ve shared in the secure note below, I know this message belongs to Wordfence plugin, so please either disable the feature that is causing this error in Wordfence or disable Wordfence -temporarily- till we investigate this issue, or simple try using a hard password.
Thanks.
Sorry about that here is some new info, tested it myself it should work:
Hello There,
I have logged in and I was able to check your custom css. These are all valid and correct:
/*Kyle's Styles*/
.x-topbar {
padding-bottom: 7px;
}
.x-navbar{
border-bottom: 3px solid rgb(231, 231, 70);
}
#menu-x-demo-menu li a span {
color: white;
background: #006;
}
#menu-x-demo-menu li a span:hover {
background: rgb(231, 231, 70);
}
#menu-x-demo-menu li .sub-menu span{
color: #006;
background: transparent;
}
#menu-x-demo-menu li .sub-menu span:hover{
color: rgb(231, 231, 70);
background: transparent;
}
.phone {
font-size:1.2em;
text-transform: initial;
}
.phone-number {
color: #006;
font-weight: bold;
}
footer, .x-colophon, .x-colophon.bottom {
background-color:#EBEBEB;
border-top: 3px solid rgb(231, 231, 70);
}
.x-btn-navbar {
padding-top: 20px;
}
.x-navbar .desktop .x-nav > li > a {
padding-top: 66px;
}
i.x-icon-bars {
color: #006;
background:#DBDE69;
padding: 3px 5px;
border-radius: 2px;
}
/*John's Styles*/
.x-iso-container-posts > .hentry .entry-wrap {
margin-top:50px;
}
.admin-txt {
opacity: 0.75;
}
.author-txt {
opacity: 0.35;
font-size:xx-small;
}
.admin-txt a, .author-txt a {
opacity: 0.75;
text-decoration:none !important;
}
.admin-txt a:hover, .author-txt a:hover {
text-decoration:underline !important;
}
I also wondered that you may have already fixed the issue since I am already seeing this:
Please clear all your caches including your browser cache and test the site again.
Ok so it looks good in chrome, and that’s a relief; that means we are on the right track.
I’ve cleared everything my browsing history in FF and my cache inside of X in the settings section (I assume this was the process you were referring to) and I’m still getting and I’m still getting the push to the right in FF and Edge.
Can I ask your your continued support is getting this working inside of FF and Edge as well. Thanks once more for all the help with this, this has turned into a bigger pain in the ass then I was anticipating.
I wanted to shed some light on something I think might be the problem (maybe or maybe not I just felt like bringing it up). I’ve added a x-child theme to this and then used some of some code that was given by another X support team member to move the nav above the author and footer text info, here is the support ticket I referenced to make this change:
Like I said I’m not sure if this is the roof of all the problems but I thought I would at least bring it to your attention.
John
Hi there,
To fix it on firefox and Edge, please add this CSS as well,
.x-container::before, .x-container::after {
clear: both !important;
}
Is there another issue related to the customization from that thread? Or do you mean that maybe it caused this main issue? It’s not, the main cause is the height of the header and the height of the logo. But, that CSS should fix it without a need for changing the existing heights.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.