Header Cut Off on Large Screen

Our responsive website raingod.org, has not had any problems that I've been aware of. However, upon pulling it up at the very large monitor at my dad's desk, the top and bottom of the header are cut off - in both Chrome and IE. Now my dad consistently did insane things on his computer and I'm hoping this is a problem with his settings. Is there some way for you to test it or is there a reason the header would be cut off on a very large screen? I HAVE run online tests for responsiveness with no problem. Thanks! Bruce

  • Rupok

    Hi Bruce, hope you are having a wonderful day.

    Yeah, I can see this too in my 1920x1080 FULL HD monitor. Please check the attached screenshot for reference.

    It's behaving like this because the image is not very wide. When you are viewing it on wide screen, it takes full width, and it's height also goes up, but the area available for that image is not raising.

    However, you can fix it with following custom CSS Code:

    .header {
      padding: 120px 0;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Please let us know if this doesn't fix the issue on your big screen. We will be glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Bruce

    Thanks for the quick and friendly response. Worked like a charm - I actually found that piece of CSS and just changed the number.

    Started out by trying to create a child theme just for the practice. Instructions say, "To start a child theme, create a new theme folder (eg. "folo-child") under the "wp-content/themes" folder. " Not to be an idiot, but where is that folder? How do I get there? Thanks!

  • kalico

    Hey Bruce I'm not WPMU DEV staff, just wandered in and saw your question.

    You'll want to check with your hosting company about how to see all the files and folders in your WordPress directory structure. You can use an interface like Cpanel (if your host offers it) or you can use an FTP app, such as FileZilla.

    Here are some links to get you started:

    http://www.howtospoter.com/web-20/wordpress/wordpress-guide-dissection-of-file-structure

    https://www.elegantthemes.com/blog/tips-tricks/understanding-the-wordpress-file-and-directory-structure

    https://codex.wordpress.org/FTP_Clients

    Have a great day :slight_smile:

    • kalico

      One more thought...for what you're trying to do (change CSS) Rupok's suggestion of using a CSS plugin is excellent. A plugin will create an area in your WP admin where you can write custom CSS that will override your theme - without creating a child theme.

      You can find the CSS in your theme that you want to change (as you did above), but instead of changing it in the theme's CSS file (which will get overwritten when the theme is updated by the developer) you just copy/paste the CSS code you want to change into the plugin interface, make your changes....and never touch the actual theme files or make a child theme.

      The one I use is called Simple Custom CSS, and it's just that -- very simple, no bells and whistles. It's very handy to have it right there in WP admin, even though I have an extensively customized child theme.

      Cheers!

  • Rupok

    Hi Bruce,

    kalico has give some valuable input. Beside that, let me specify. Login to your server with any FTP Application like FileZilla and go to your domain root folder. If you are not sure which one is your domain root folder, your hosting provider can guide you. When you are at the root folder of your domain, go to "wp-content" folder, then there you will see a folder called "themes", enter into that. Now this is the folder you were looking for.

    Regarding theme modification and child theme creation, both have different purpose. Suppose you created a theme and you wish to use that on a single site, you can modify that theme. Now if you purchased a theme, and modify that, all changes will be gone with update of that theme. If you use 3rd party custom css plugin, then it's safe.

    And child themes are more popular in multisite networks. Suppose you have a network activated theme and you are using this on all subsites. Now you need red header for one subsite and blue header for another subsite. How can you do that? If you change the header to red with custom CSS or modify the theme, all subsites will show red header because all of them are using the same theme. In this case, child themes come handy. You can create different child themes with blue header red header etc. and activate those child themes only on required subsite.

    I hope the concept is clear to you now. Please let us know if you still have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.