How to reduce the width of content container in Virtue?

Hi Barney,
You can use this css to adjust the container width:

@media (min-width: 1200px) {
.container {
    width: 1050px;
}
}

Just paste that into your custom css box in Theme Options > Advanced Settings.

Can you link to an example of your product image as a link?

Hannah

Hi Hannah,

Many thanks for the code, it worked perfectly, but has had a sign affect of putting the body background frame image over the top of the header and footer frame images. Is there a way to make sure that the header and footer are layered on top of the body background image? https://www.test.barneysbiscuitboxes.co.uk

The product image issue can be seen https://www.test.barneysbiscuitboxes.co.uk/shop/biscuit-box-medium-dog/ The link ‘Large Box Menu 1’ should show as a full product image not as the link. (it appeared after the latest update)

1. I’m not sure I’m seeing that. Could you send a screenshot?

2. Hmm, have you tried re-uploading that image? Is that the only place this is happening?

Hannah

Hi Hannah,

1. Sorry, but how do I send a screenshot? I have tried the img button but it asks for a url of the image. Do I need to upload the screenshot to the site?

2. in regard to the product image showing as a link. It happens across all the products in the shop. I’ve deactivated all the plugins and reactivated them. I have regen’d all the images. I have deleted the main product image put another in its place and have had no luck in getting the image to appear.

Barney

1. You can use a site like this to host it – https://postimage.org/

2. Are you using the latest version of the theme? And are all your plugins up to date?

Hannah

Hi Hannah,

1. Here is the link https://postimg.org/gallery/3itt3y98e/ The image labeled ‘correct’ is how I want it to look and the one labelled ‘Webpage’ is how it is replicating in a live environment. The body container has a background image of the vertical red and blue lines. The header and footer contain the curve and horizontal red and blue lines. I would like the header and footer to be layered on top of the body container background so that the blue line joins the curve and then doesn’t cross the small white bone in the corner. Does that make sense?

2. Yes, all the plugins and Virtue are up to date. The issue occurred when I updated Virtue from .4 to the latest version which I think is .7. We still have .4 running on our live site and it works absolutely fine https://www.barneysbiscuitboxes.co.uk/shop/biscuit-box-small-dog/ .

Thanks for any help.

Barney

Hey,
1. I can’t get the gallery in postimg to open? can you check the link? It’s telling me when I click the link that “This gallery has no images”

2. I see the issue. I will post an update. It’s caused because your images are smaller then the expected output. 465×465 and since they are smaller they aren’t being output correctly. While I would encourage you to use larger images I’ll have a fix for this so it outputs the smaller without issue.

Ben
Kadence Themes

Hi Ben,

I have re uploaded the images to a new link https://postimg.org/gallery/30oa8js5a/ hopefully this time it will work and you can see the issue.

2. I can resize the images to your minimum size, I didn’t know there was a minimum and it worked on previous versions. No need to update your code, I’ll just resize.

Many thanks

Barney

2. I would add support for this regardless as a fallback so thats already been uploaded and fixed. If you want to upload larger images I suggest 1600×1600 so you can support the lightbox and larger screens.

1. I’m looking at your image. There are a couple issues the most important being that this design is naturally not responsive. Requiring a background image to build structural elements usually means you end with issues if your in a responsive environment. Mostly you need fixed environment for this type of design so I would suggest against it.

That said here is the best workaround hack I could think of.

header.banner.headerclass {
    background:transparent !important;
}
body.boxed:before {
    content:'';
    height:330px;
    width:100%;
    display:block;
    top:0;
    position:absolute;
    background: #ffffff url(https://www.test.barneysbiscuitboxes.co.uk/wp-content/uploads/2017/03/Header-deep.png) no-repeat top center;
}

Ben

Hey Ben,

Thanks for the heads up about the responsive image issue, I was aware but hoping to use this update in the short term.

1. Works a treats thanks very much. I have the same issue with the footer and have tried:
footer#footercontainer.footerclass {
background:transparent !important;
}
body.boxed:before {
content:”;
height:330px;
width:100%;
display:block;
top:0;
position:absolute;
background: #ffffff url(https://www.test.barneysbiscuitboxes.co.uk/wp-content/uploads/2017/03/footer.png) no-repeat top center;
}

but it placed the footer into the header container. I’m not sure if the issue is ‘body.boxed:before’ or ‘top:0’ or if it is either of those?

2. Again your update worked a treat. I will however take your advice and use the larger dimension on our live site.

Many thanks

Barney

body.boxed {
    position:relative;
}
body.boxed .footerclass {
  background:transparent !important;
}
body.boxed:after {
    content:'';
    height:330px;
    width:100%;
    display:block;
    bottom:0;
    z-index: -1;
    position:absolute;
    background: url(https://www.test.barneysbiscuitboxes.co.uk/wp-content/uploads/2017/03/Footer.png) no-repeat top center;
}

body.boxed #wrapper.container {
    margin-bottom: 0;
    webkit-box-shadow: none !important;
    box-shadow: none !important;
}

There is the footer hack

Thank you very much for all your help. All your support has helped to make the updated site run smoothly.

Barney