how to widen elements on the page

Increasing max-width for wrap will make things wider, just for example I did it in following way :

.wrap {
    max-width: 1300px;
}
.navigation-top .wrap {
    max-width: 1300px;
}

Thank you for this.

I have been able to sort out the navigation bar. I used 100% basically instead of pixels. I hope that will allow the design to reduce gracefully for other devices.

There are two templates at work which don’t relate to each other. They use different names for the containing divs. The static front page is different from a page created from scratch.

The container div of the front page is panel, that of another page is article/content area — this makes it very difficult to create a consistent style for the whole site.

There seem to be underlying divs which contain the page’s particular content. And they seem to govern the width of the div on top.

A further problem — I cannot find how to reduce the height of the white space between an entry-header and the entry-content.

Does the single.php do something the index.php page does not? Has anyone shown how the divs and elements fit together in a boxes? Which contains which and so on….

I think using max-width will not effect mobile usability of the website. Its Max-Width not just Width that mean maximum size should be it and it will not fix width on all devices.

Using the css code i have mentioned in last replay will solve your problem on all pages.

for height of white space try this :

.site-content {
	padding: 0;
}
body:not(.twentyseventeen-front-page) .entry-header{
	padding-bottom: 0px;
}

Thanks that does not help, unfortunately.

Here is what I am seeing. And a discussion of the problem.

Have a look at this : https://demo.amazingdevelopers.com/

And check this Page : https://demo.amazingdevelopers.com/test-page/

I looked at the test-page. That is exactly what I wanted to do.

Where did you make changes for that page? On the page template? I tried to take some of the elements from your stylesheet to use on my site, but that did not work.

It appears that on the ordinary pages a sidebar is being called even if blank and even if the site is supposed to be single column (chosen in the customizer options for the theme).

Thanks for your help in the meantime.

I haven’t made any changes other then style sheet. Here is style sheet of child theme :

.navigation-top {
	margin-left: auto;
	margin-right: auto;
	width: 96.4%;
}
.content-area {
	padding-left: 3em;
	padding-right: 3em;
}

@media screen and (min-width: 48em) {
	.has-sidebar:not(.error404) #primary {
		width: 68%;
	}
	.has-sidebar #secondary {
		width: 26%;
	}
	.wrap {
		max-width: 1300px;
	}
	.navigation-top .wrap {
		max-width: 1300px;
	}
}

body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
	float: none;
	width : 100%;
}
.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
	float: none;
	width : 100%;
}

• This reply was modified 8 years, 2 months ago by malik mati.

I appended the css code to my child theme style sheet. Looked at a couple pages and no change. Thanks for your help so far. The pages look as they do in the screen shots referenced above.

If you can give me URL of your website, I will try to check.