WordPress.org

Forums

Simple Catch
[resolved] Problem with high resolution monitor (16 posts)

  1. stagius24
    Member
    Posted 3 years ago #

    I am using 1900x1080 monitor. On my monitor the header and background expand all the way, and fill the whole screen, while the content is fixed.

    Is there a way I could make the header,background, footer fixed. I think it will look much better on high resolution monitor. On smaller monitor, the theme is beautifully displayed.

    Thank you

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Please post a link to the issue.

  3. stagius24
    Member
    Posted 3 years ago #

    http://spac.co.nf/
    I am talking about the gray header on top and blakc footer at the bottom.. How can I make the size fixed?
    Thank.

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Is this what you're seeing http://awesomescreenshot.com/02bsj1y9d ?
    If so, which size would you prefer the footer and header to be?

  5. stagius24
    Member
    Posted 3 years ago #

    Yes .. I want them to be smaller.

    Can you show me how to do it because I am not sure how much is better? Let say 1000 px for top and bottom?

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Does that theme come with a section in the dashboard named, "Custom Styles, "Custom CSS" or "Jetpack"?

  7. stagius24
    Member
    Posted 3 years ago #

    Yes :D
    It also have the style.css in the theme options

  8. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Add in your "Custom Styles, "Custom CSS" or "Jetpack" option;

    .top-bg,
    #footer {
     width: 978px;
     margin: 0px auto;
    }
  9. stagius24
    Member
    Posted 3 years ago #

    It worked partially. Thank you for your help

    What about the color background (gray on top and yellow on bottom) they need to be shrink also.

  10. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Try using a browser developer tool for this kind of exploratory CSS work.
    I used Google Chrome's built-in Developer Tool to get that CSS posted (above).

    Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.

    Then add changes through your Custom CSS option.

  11. stagius24
    Member
    Posted 3 years ago #

    Thank you for the tips. I was able to locate

    body.custom-background {
    background-color: #f4f4eb;

    I tried to add width: 978 px to shrink down but it doesnt work. Can you help me?

  12. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    I'm not sure I follow which element you want shrunk, "gray on top and yellow on bottom".

  13. stagius24
    Member
    Posted 3 years ago #

    it is the yellow background that fills the whole page
    http://awesomescreenshot.com/098sj53d5

  14. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Try;

    body.custom-background {
     background: #fff;
    }
    
    #main {
     background: #F4F4EB;
    }
  15. stagius24
    Member
    Posted 3 years ago #

    OMG .. it worked.
    I wish i can speak the language of CSS. Thank you.

  16. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    And Thank you for contributing to the WordPress community :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.