Full width instead of widget area

Hi @jasperh,

Which specific page do you want to display the widgets on?

The following custom CSS would increase the main content area of all your site’s pages so that it took up 100% of the available room:

@media screen and (min-width: 896px) {
    .content-area, .large-element, .portfolio-media, .portfolio-projects, .post-thumbnail {
        width: 100%;
    }
}

You could then target an individual page with some extra custom CSS to make sure the sidebar still appeared.

Hi @siobhyb,

what happens when i use this code is that i losse what i like about the Orvis Theme: all tekst on the left and all images on the right.

The developer of JiG send me this code:

/*
JiG solution 
*/
.portfolio-content {
width: 100% !important;
}

and whit this one happens the same as whit the code you provided.

Anny idea’s?

Ah, I see! You could get around that by removing .large-element, .portfolio-media, .portfolio-projects, .post-thumbnail from the custom CSS I provided. This would leave you with the following:

@media screen and (min-width: 896px) {
    .content-area {
        width: 100%;
    }
}

The above would not apply to portfolio projects, so the column structure that you like would remain in tact on those pages.

Sorry @siobhyb, but i’m still not good to go…

I removed the code JiG-forum provided en entered your code but now i’m back to the start: the images are under the tekst and not on the right-side. My intention in a nutshel:

5 types of pages:
– 1 homepage: https://derest.nl (tekst on the left, images in 2 columns on the right >now i have 1 column)
– 2 page with overview: https://derest.nl/project-type/hoogtepunten-theaterschool/ (i want to use the hole with here > now i have a blank space on the left)
– 3 page with 1 project: https://derest.nl/portfolio/de-rest-speelt-2016/ (same as home page > now the foto’s are under the tekst)
– 4 ‘normal’ page with widget area on the left side: https://derest.nl/over-de-rest/ (> now the widget area is under the tekst)
– 5 ‘normal’ page without widget area so i can use the hole with: https://derest.nl/videos/ (this one is good to go!)

This is the code Kathryn thinks is the problem, it is in de JiG-plugin.

<div id="jig1" class="justified-image-grid jig-d52187bd93d0198e946dfb09a3b6f7c3 jig-preset-global jig-no-touch" style="width: 276px;">

Is the solution to change the width: 276px; to width: 924px; (the main column with of the Orvis Theme)? If this is the solution where can i make this chance?

Thanks!

Hi @jasperh,

There’s quite a lot of questions packed into your reply! I’ll do my best to go through these one by one but, in future, could you please start a new thread for each individual question? Separate threads will make it much easier for us and others to follow along.

– 1 homepage: https://derest.nl (tekst on the left, images in 2 columns on the right >now i have 1 column)

To start with: I’m not sure why only one column is displaying on your home page instead of the theme’s default three columns.

From inspecting the code, it looks like all three portfolio items (that should be lined up in a row) are loading on top of each other to give the appearance of one column.

Did you make any direct changes to the theme’s files that may have caused this issue? If not, could you please try disabling your plugins (excluding Jetpack) one by one to test if any are conflicting with your theme and causing the issue.

If those troubleshooting steps don’t help, please try installing a fresh copy of the theme.

To do that, you’ll first need to activate a different theme via Appearance > Themes. You’ll then be able to delete the existing copy of Orvis by selecting it and the clicking on the option to Delete. Search for and re-install Orvis from there.

• This reply was modified 8 years, 5 months ago by Siobhan.

– 2 page with overview: https://derest.nl/project-type/hoogtepunten-theaterschool/ (i want to use the hole with here > now i have a blank space on the left)

If you navigate to Appearance > Customize > Portfolio, you’ll find the option of adding content to the left-hand space on those archive pages.

Alternatively, you could use some custom CSS to hide that space and increase the width that your portfolio items take up on archive pages:

.archive .portfolio-content {
	display: none;
}

.archive .portfolio-projects {
	width: 100%;
}

@media screen and (min-width: 896px) {
	body.archive:not(.single-jetpack-portfolio):not(.search) .jetpack-portfolio.hentry {
		width: 31%;
	}
}

Increase/decrease the value of width from 31% to increase/decrease the amount of space that portfolio items take up. For example, if you’d like them to only take up half of the available space then you should change the width to be around 50%.

– 3 page with 1 project: https://derest.nl/portfolio/de-rest-speelt-2016/ (same as home page > now the foto’s are under the tekst)

Is the solution to change the width: 276px; to width: 924px; (the main column with of the Orvis Theme)? If this is the solution where can i make this chance?

The theme searches the code for an <img> tag that’s either surrounded by a <p> or a <figure> tag. It then pulls that <img> to the right hand side of individual portfolio pages.

The plugin you’re using generated other code that surrounds the <img> and, therefore, the theme doesn’t pick it up during the above search.

Getting the theme’s code to work with the plugin would require fairly advanced changes to the code, which goes beyond the scope of support that this forum is intended for.

If your aim is to include images from Flickr on the right, you could consider manually adding the needed HTML rather than using a plugin.

I found the following online tool that will generate the HTML code for you:

https://www.imagecodr.org/get.php

– 4 ‘normal’ page with widget area on the left side: https://derest.nl/over-de-rest/ (> now the widget area is under the tekst)

The widget area is displayed to the right of the page’s main content area for me, when viewing that page:

Is that displaying below the text on your end?

Hi there @siobhyb,

this day i had the feeling that all of this customizing was getting just to complicated for me. When i told a friend he suggested me to buy the Avada Theme and so i did just now. I wanted to tell you this before you started te help me any further. But you where just a few minutes ahead…sorry

I hope i didn’t bother you to much and i hope this Avada works for me
Have a nice weekend!