Help with CSS spacing on WordPress Pages versus Posts

  • Resolved LuxuryLivingFTL

    (@luxurylivingftl)


    8 years, 3 months ago

    We are using a theme called Winning Agent Pro. The spacing of the page content on posts is different from the spacing on pages. We tried editing the CSS to change the margin to make the spacing appear the way we wanted it to, but it causes the content on the page to be in a different location than the content on a post.

    The CSS that controls the element we are trying to move is below. The spacing of the content with this code looks good on a post, but not on a page.

    .site-inner, .search-bar {
 padding-top: 0px !important;
 margin-top: -50px;
}

    Here’s how the above CSS creates the correct spacing on the top of a post (the space between the breadcrumbs and the logo):
    https://luxurylivingfortlauderdale.com/sold-4444-el-mar-drive-unit-3402-lauderdale-by-the-sea-fl-33308/

    And here’s how a page looks:
    https://luxurylivingfortlauderdale.com/lifestyle/restaurant-guide/

    Why does the CSS make pages look different from posts, and how do we fix it so that the spacing between the logo and the breadcrumbs is the same on both?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hi!

    It appear that there is an extra widget on the page within the search bar that is creating that extra space. Might I suggest avoid using visibility:hidden only because the space will still be calculated for that but will not be visible. If you really don’t want to show that either use display:none or just don’t render it. ??

    If you are needing specific help with the theme be sure to reach out to the theme’s author as they know the code base much better and because it is a commercial product. Commercial products are not supported on these forums

    Thread Starter LuxuryLivingFTL

    (@luxurylivingftl)

    Jose, thank you!

    When I changed the CSS it worked on the posts and pages, but then it also removed the “search bar” on the home page, which is the only page we actually want the element to display.

    Here’s the original code:

    .search-bar {
visibility: hidden;
}

.home .search-bar {
visibility: visible !important;
/*padding-top: 30px !important;*/
 padding-top: 0px !important;
}

    And here’s what we changed it to:

    .search-bar {
display: none;
}

.home .search-bar {
visibility: visible !important;
/*padding-top: 30px !important;*/
 padding-top: 0px !important;
}

    For some reason, the display:none is overriding the !important tag on the home page, and thus removes the search bar on the home page. Any other thoughts on how we can fix it?

    From now on, I will send support questions to the theme developer, sorry for that!

    Thread Starter LuxuryLivingFTL

    (@luxurylivingftl)

    All set, we changed the visibility: visible to display:inline and it resolved our issue.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Glad to see you were able to sort it out! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with CSS spacing on WordPress Pages versus Posts’ is closed to new replies.

Tags