Support » Theme: Twenty Seventeen » how to widen elements on the page

  • There are a number of bounding boxes surrounding the various elements on the page in twentyseventeen. These containers (wraps) bind elements together which make sense. However, how they interact with each other has been a mystery.

    I have spent some time trying to make the entry-content wider. (My customer only wants a 10% margin left and right.) I have tried to make every wrap and div 100% but nothing seems to make a difference.

    I also want to raise the top navigation bar to right below the site branding div. This is impossible because the toggle reserves space even though it is not visible (a problem with setting divs to hidden, I believe). Is it possible that the javascript that controls this behaviour skips this part of the code and runs into the navigation bar itself (a simple if…then testing for size of viewport)?

    Another curiostity is the top navigation bar does not extend to the width of the page.

    Many of the problems arose when I updated to the newer twentyseventeen.

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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;
    }
    Thread Starter stilman davis

    (@stilman-davis)

    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;
    }
    Thread Starter stilman davis

    (@stilman-davis)

    Thanks that does not help, unfortunately.

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

    Thread Starter stilman davis

    (@stilman-davis)

    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 4 years, 10 months ago by malik mati.
    Thread Starter stilman davis

    (@stilman-davis)

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘how to widen elements on the page’ is closed to new replies.