johnhoston

Although i cannot disclose the contents of our intranet’s site, i attach 2 images that represent the problem:

1. Layout for low resolutions (up to 1280×1024):
https://pasteboard.co/ZF3Sh83xA3JP.png
(1 column with the main content and below that 2 sidebars columns side-by-side)

2. Layout for high resolutions (above 1280×1024):
https://pasteboard.co/ouaESD5AIO1N.png
(3 columns side-by-side: sidebar-content-sidebar)

At 1280×1024 the site has the first layout, but i need it to have the second.

EDIT: I use the OceanWP theme.

Thanks for the reply @abhikr781

Although i cannot disclose the contents of our intranet’s site, i attach 2 images that represent the problem:

1. Layout for low resolutions (up to 1280×1024):
https://pasteboard.co/ZF3Sh83xA3JP.png
(1 column with the main content and below that 2 sidebars columns side-by-side)

2. Layout for high resolutions (above 1280×1024):
https://pasteboard.co/ouaESD5AIO1N.png
(3 columns side-by-side: sidebar-content-sidebar)

At 1280×1024 the site has the first layout, but i need it to have the second.

EDIT: I use the OceanWP theme.

• This reply was modified 3 years, 1 month ago by johnhoston.

Setting just padding did the trick, thanks @abhikr781 !!

Thanks for the reply @abhikr781
I have already tried this and it works, but partly:
The header area expands downwards OK, but the site title stays at the same spot, so it is not vertically centered.

Any ideas on how to fix this?

Thanks for the reply @abhikr781

The site is only accessible in the company’s intranet.
But the HTML code of the header is as follows:

<header id="site-header" class="top-header has-header-media effect-four clr" data-height="74" itemscope="itemscope" itemtype="https://schema.org/WPHeader" role="banner">
  <div class="header-bottom clr">
    <div class="container">
      <div id="site-logo" class="clr" itemscope="" itemtype="https://schema.org/Brand">
        <div id="site-logo-inner" class="clr">
          <a href="..." rel="home" class="site-title site-logo-text">...</a>
        </div><!-- #site-logo-inner -->
      </div><!-- #site-logo -->
    </div>
  </div>
  <div class="header-top clr">
    <div id="site-header-inner" class="clr container">
      <div class="left clr">
        <div class="inner">
          <div id="site-navigation-wrap" class="clr">
            <nav id="site-navigation" class="navigation main-navigation clr" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation">
              ...
            </nav><!-- #site-navigation -->
          </div><!-- #site-navigation-wrap -->
...

Given this styling, is there a way to increase the header area?
I mean the area above the top menu, which contains the image and the site title.

Thanks in advance.

@hcabrera it works, thank you!

To make it perfect, is it possible to add a divider after the last post too?
This way it will be exactly the same like the other widgets.

@hcabrera the site is accessible only in the company’s intranet.

The HTML code of the sidebar widget containing the plugin is as follows:

<div id="block-122" class="sidebar-box widget_block clr"><div class="widget popular-posts wpp-ajax"><!-- cached -->
<ul class="wpp-list">
<li>
<a href="https://..." class="wpp-post-title" target="_self">...</a>
 <span class="wpp-meta post-stats"><span class="wpp-date">2 weeks ago</span></span>
</li>
<li>
<a href="https://..." class="wpp-post-title" target="_self">...</a>
 <span class="wpp-meta post-stats"><span class="wpp-date">1 week ago</span></span>
</li>
</ul>
</div>

We just need a simple divider between the {li} tags, hust like the latest posts widget.
I hope this helps.

• This reply was modified 3 years, 2 months ago by johnhoston.

Thanks for the reply @hcabrera

They are the simple/default wordpress dividers, just like the ones on the right sidebar of this page
——————–>

Worked like a charm, thanks!

Thanks for the answer. But this applies only to blog list. What about the other pages?