WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. stagius24
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

    Please post a link to the issue.

  3. stagius24
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  7. stagius24
    Member
    Posted 1 year ago #

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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    .top-bg,
    #footer {
     width: 978px;
     margin: 0px auto;
    }
  9. stagius24
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  13. stagius24
    Member
    Posted 1 year ago #

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

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try;

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

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

  16. Andrew
    Forum Moderator
    Posted 1 year 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.