Cannot Fit Wide Screen

To Thomas717 – what do you mean it does not fit wide screen? Are you saying the theme is not wide enough?

Water63 – I have not followed this free WordPress theme long enough to see any menu changes. Suffice to say, to get what you want requires a fixed positioned menu bar and that requires some Custom CSS to do that. Plus with the layout of this theme, you have the side menu designed into it, which shows the footer menu.

If you want to change the top horizontal menu positioning to fixed via Custom CSS, you may find some issues with the side vertical menu. If that happens, deactivate the side menu (which is the footer menu) in Appearances – Menu – (tab) Manage Locations, then under “secondary menu” open the drop list and choose “-select menu-” which deactivates it and save the changes.

Note, some themes provide settings for the menu to be fixed or not in the Customizer, but since Twenty-Fourteen is a default WordPress theme, and free, it is limited to what you can do with it in the Customizer.

If you cannot get some Custom CSS done to make it work the way you want it, then you will have to seek out a premium theme that provides for that kind of menu positioning, since you are more likely to find it in premium themes than free ones.

Lasting, you would be better off creating your own post about the menu question than tagging along with this one that was about the width of the theme.

thomas717 – I cannot tell anything from your screen shot because it is mostly all black with a very narrow part of white barely showing any content or the page.

No matter, I suppose from this you mean the theme is not wide enough and won’t expand to fit the 17″ monitor screen.

Unfortunately, which I have no idea why, WordPress designed the theme like this in today’s styling for websites, but they purposely made this theme to be a max of 1260 pixels wide, yet they failed to center it on the page, so it sits to the left and there is a wide vertical empty space at the right side.

To fix this gross error by WordPress, you have to do these things,

1. Create a Child theme version and insert the required files and PHP functions
2. Copy the template “custom-header.php” into the child theme folder and customize it to address the header size and cropping of any header images
3. Apply Custom CSS

This is because you have to deal with the theme’s CSS styling on the width of the theme, and the custom-header.php controls the header image sizing in Customizer and Media library in relation to cropping an image for use in the header area. You need the Child theme created to ensure changes to the custom-header.php file are not lost when they update the theme.

1/ To create a Child theme with required files, follow the instructions here: https://codex.wordpress.org/Child_Themes

You will need access to your website file structure to do this, use CPanel File Manager APP in your website hosting account or use an FTP client like FileZilla to access your website file/folder structure.

Once you created the child theme folder and contents, you need to activate it in “Appearance – Themes” in WordPress admin area.

2/ To copy the custom-header.php file to the Child theme folder, you can find that file here, /wp-content/themes/twentyfourteen/inc/custom-header.php. To access that file in the WordPress Twentyfourteen theme folder “inc”, you will need to use the File Manager in the CPanel of your website hosting account or use a FTP client to access your website folder structure.

CPanel Filer Manager, when opened, offers the use of a file code editor, I think is normally named “Code Editor”. Copy the custom-header.php file to the child theme, then, while in the child theme folder, using Code Editor and edit the file as follows,

or

In FTP client, download the custom-header.php file to your computer, edit using NotePad++ (excellent free text editor you can get online here: https://notepad-plus-plus.org/ )

What to edit in custom-header.php,

1. Go to line 40, gives the width, change 1260 to 1950 (which is between two single quotes).
2. Go to line 41, gives height, change 240 to 350 or whatever height you want, you can leave it at 240 if you want.
3. Go to line 105, “max-width: 1260px;”, change that to 1950px
4. Save the file in the editor
5. If using Code Editor, close it and your done. If using NotePad++, close it and upload the file to the child theme.
6. (See Note below)

3/ Custom CSS (after creating and activating the Child Theme), access the Custom CSS section in the Customizer in the WordPress Admin area “Appearances – Customize – Additional CSS”. Insert the following into the text box area,

.site {
max-width: 100%;
}
.site-header {
max-width: 100%;
}
.entry-header, .entry-meta, .entry-content, .navigation.post-navigation {
max-width: 85% !important;
}
#comments {
max-width: 60%;
	border: 0px solid green;
	border-width: 0 0 0 3px;
}
@media screen and (max-width: 720px) {
#comments {
max-width: 90%;
}
}

This will address most of the needed changes to make the theme work in a wide screen, but I have not finished the site yet to say this custom CSS is all of it, so I may require more custom CSS, the only way to know is when I work the theme and see what more I need to fix to make it a full width theme.

Note:
Where to save a copy of the custom-header.php file in the Child Theme folder is a current issue at this time, because it is not working, but is suppose to work. I have created a post here in this forum where I hope someone will provide the answer. You can find that post here,
https://wordpress.org/support/topic/child-theme-modify-parent-theme-template-file-located-in-subfolder/ .

• This reply was modified 6 years, 3 months ago by mwarbinek.