Docs

[Steve C]

I have setup a development site (eyetooth-art.net/test) in order to try updates and site changes without affecting my live site (eyetooth-art.co.uk).
I recently updated my child theme on the test site and it seems to have broken the layout of my portfolio page. Do you have any advice on what has gone wrong or what I should do to allow it to display correctly.

You can see the broken page here: http://www.eyetooth-art.net/test/portfolio/
and the owrking version here: http://eyetooth-art.co.uk/portfolio/

thanks

[Thai]

Hi Steve,

Would you mind providing us with login credentials for the test site so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Steve C]

This reply has been marked as private.

[Christopher]

Hi there,

To fix the issue, please find and remove following CSS from child theme’s style.css file :

.heading .right, .heading-long .right {
    background-image: url(http://www.eyetooth-art.co.uk/wp-content/uploads/2015/12/heading-end.png);
    background-repeat: no-repeat;
    float: right;
    height: 50px;
    width: 60px;
    background-position: right;
    position: relative;
    right: -50px;
}
.heading, .heading-long {
    clear: both;
    float: left;
    width: 100%;
    display: block;
    height: 50px;
    background-image: url(http://www.eyetooth-art.co.uk/wp-content/uploads/2015/12/heading.png);
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    left: -50px;
}

Hope that helps.

[Steve C]

I’m sorry but that doesn’t seem to help at all. All that does is remove the styling I have applied to the headers.

The page is displaying a little better after I repeatedly resaved and edited the pages but there is still a double header visible on the site and I can’t figure out how to remove it. There are also other layout issues like the page not being constrained to the width I have set.

Please compare the 2 pages to see the errors on the test site:
test site: http://www.eyetooth-art.net/test/portfolio/
working site: http://eyetooth-art.co.uk/portfolio/

I don’t really understand why this suddenly broke either, as it was working fine last week and then suddenly broke.

[Rad]

Hi there,

I checked both child theme’s style.css and they are different.

http://www.eyetooth-art.net/test/wp-content/themes/x-child/style.css
http://eyetooth-art.co.uk/wp-content/themes/x-child/style.css?ver=4.4.2

It seems related to changes you added, it will not change itself. For example, this CSS blog that responsible for heading art design is within the comment block.

/*.heading, .heading-long {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	height: 50px;
	background-image: url(http://www.eyetooth-art.co.uk/wp-content/uploads/2015/12/heading.png);
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
	left: -50px;
}
.heading .right, .heading-long .right {
	background-image: url(http://www.eyetooth-art.co.uk/wp-content/uploads/2015/12/heading-end.png);
	background-repeat: no-repeat;
	float: right;
	height: 50px;
	width: 60px;
	background-position: right;
	position: relative;
	right: -50px;
}*/

The comment block will of course, disable it. There should be no /* */ if you wish to make it active.

Thanks!

[Steve C]

Sorry but it feels like we are going round in circles here. That CSS is commented out as it was suggested as a fix for the portfolio page not dusplaying correctly which did not work, so I left it as that to show that it made no difference to the way the portfolio page displays but instead broke all the heading styles throughout the site.

Please read through my earlier posts where I explained everything and let me know if there is a way to fix the issues.

– There are two headers shown on the page.
– the page width is not constrained to the max width I set.

Both these things work fine on the live site but not the test site so you can compare the 2 to see the difference.

thanks

[Rad]

Hi there,

Yes, but please put it back to how it was if it breaks your current styling. Putting it back should bring back the missing header backgrounds. It’s only normal if we restart over if the recommendation won’t work.

As for the width, it probably due to the customization you have. For example, this is the generated code

You’ll notice that x-main is repeated 4 times. And it’s only possible through direct coding to the templates. Would you mind providing your FTP login credentials as well?

Thanks!

[Steve C]

Thanks for your help so far. I have restored the style css file now. There was some custom code added in order to have headers display on the portfolio & blog pages which you kindly helped me with.

I think if we can somehow remove the second header from portfolio page on the test site it may fix the issues?

I will send FTP information in a private reply for you below.

[Steve C]

This reply has been marked as private.

[Lely]

Hello Steve,

Unfortunately, I can’t connect on the test server. See attached screenshot. Please double check.

[Steve C]

This reply has been marked as private.

[Lely]

Hello Steve,

I tried using Winscp instead of Filezilla and I am able to connect.
I did check template-layout-portfolio.php file from this folder wp-content/themes/x-child/framework/views/integrity.

I’ve noticed that you have added this line:
<?php $page = get_post ( 6049 ); echo apply_filters('the_content', $page->post_content ); ?>
That line of code was the reason of the double heading and error of display. Removing those line fixed the issue on this page:http://www.eyetooth-art.net/test/portfolio/. Please check.

Always,
X

[Steve C]

thanks very much for sorting that out. There is only one minor issue on the page now.

the portfolio items are not a set max-width which is setup in the page code as per the live site? Do you have any idea what could be causing this to display differently on the test site? As far as I can see exactly the same code is being used on both.

[Rupok]

Hi there,

I can see there is no container for the template on the test site. Please check and make sure to not remove the container. You could also try the following custom CSS but it would be best approach to keep the container :

.page-template-template-layout-portfolio .x-main.full {
  margin: 0 auto;
  max-width: 1240px;
  width: 90%;
}

Hope this helps.

Cheers!

[Author]

Posts