"White-space" between header and content

[pcnordhaug]

BIG PROBLEM! On each site built with your PRO-theme (you can probably see from my account that there is a few by now).

This problem have been there on all since I started with the PRO, but never bothered to do anything about it. Now it really annoys me. Especially because this time the customer is also complaining about it. And I really cant fix it.

I fix most things with a little spipplet of code. But not this. Your theme is absolutely gorgeous for that, but this cant be dont is just annoying. Maybe its just me.

Firstly, it’s a bit bad that it’s still the case that when you switch from x to PRO, the heading and the ability to sort the content disappear on f ex the portfolio page. Why?

Anyway, and my problem now is part of this. I think, but dont really know. Do you? I have searched the forum and everywhere many and several times for a solution but everything that exists is only halfway there for solving it. I see many more looking for a solution on this…

I link to the page that this is the case now in a private post below. This is a site with woocommerce. The problem is especially on this pages, but also on all the other I have set up and there is no woocommerce. It’s on all the pages that have this headings. Archived pages, portfolio, articles, etc.

It´s impossible to control the distance from the header down to where the content begins. From what I can see it is a problem both if selected pro over x, as well as made a custome header with your header solution and not standard as you had before. Once these are selected, the content jumps far down the page.

You can choose that the header does not appear but then there will only be a large white space there. And if you choose it to be shown, it will not be shown anyway, as mentioned.

I have tried a lot of code but can not see any solution.

And this especially applies to mobile viewing. On the pages I am referring to, it´s ok on the big screen (although I would like an opportunity to control this here as well), but on mobile it is not good at all. the content (page) starts too far down.

Have to mention that I for this site copied the css-files from your “craft-shop”-site. Just the css. Rest of it i have built, but liked a lot from your “craft”-page so have used some of the code. Regardless; the problem is there on every other page that is set up as well.

To finish;

I can code, change files in for example the child theme as well as a lot of other weird stuf:). Just looking for a solution here.
See that you usually say that coding is outside your scope etc – and contact a developer. This is not helpful for me. I can code etc, just need some help. I’m the developer.

Help?

[ruenel]

Hello @pcnordhaug,

Thanks for writing in!

1.) The landmark heading and the ability to sort the portfolio items on the portfolio page are part of the default header. Once you have created a custom header, the landmark heading and the sort filter button will be replaced with the elements that you have inserted in your custom header.

You might want to check out this old thread about it: Category and Archive Header Landmark

2.) You are having difficulty with the empty space between the header and the content area. Please removed this custom CSS first:

.headerfixed.x-bar {
    position: fixed;
    width: 100%;
    top: 0;
}

And also, you added this code:

.x-container.offset {
    margin-top: 45px;
    margin-bottom: 90px;
}

Please remove any custom CSS that you have inserted as it may lead to a conflict one after the other. It is best that we resolve each of your spacing issue per page or at least give us a few URLs where we can compare the gaps. Normally. all pages have the same spacing between the header and content area. As soon as you change the page template like using the Blank - No Container page templates, the spacing will be different.

Hope this helps.

[pcnordhaug]

Hi.

Thanks for info on landmark heading. Have not seen this thread before and it seems to solve the problem – a bit at least

When it comes to the empty space between the header and the content area, you first ask me to remove a code. Have allready tried this and it did not solve anything at all. This is also a code I would very much like to have there. It is a solution for that the header “jumps” or hangs a little. I think it was in contact with you that I finally got it fixed. Was very annoying, but with this code the header is fixed at the top without jumping (especially on mobile).

I use a “headerfixed”-class on the header and this element-CSS also in the header.

.headerfixed.x-bar {
    position: fixed;
    width: 100%;
    top: 0;
}

.headerfixed.x-bar-space {
    display: block !important;
}

This code

.x-container.offset {
    margin-top: 45px;
    margin-bottom: 90px;
}

is just a code that came along with the other code I copied in from your “crafty”-template.

It just moves the content down a bit, but it looks ok on the big screen - the problem is on mobile. If I remove this code, the content moves too far up on the big screen. There is something wrong with the mobile (?). See attached screenshots from large and mobile view.

You also ask me to remove all custome CSS. But this is the whole setup and styling from Crafty-template. Why? Is this necessary. That will really ruin the whole site. Will at least not be like this crafty-template. Is the styling from that I want and has got in place. Working fine. Is super happy, but not with this extra white space especially on mobile…

[tristup]

Hi @pcnordhaug,

It seems that the WooCommerce result count section and WooCommerce ordering section is the reason behind your issue, the custom CSS code set the opacity of these sections to 0. It makes the section invisible but the area is still occupied by that, I would suggest you use the following code to remove the invisible area.

@media (max-width: 480px)
{
    .woocommerce-result-count, .woocommerce-ordering
    {
        display: none;
    }
}

You can adjust the breakpoints by adding the exact breakpoint where the issue occurs.
You can learn more on the breakpoints in this article

Hope it helps.
Thanks

[pcnordhaug]

Hi @tristup,

Thank you! I used your code and this works great. Finally

The problem is solved.

Just for my curiosity, however, I wonder if it is best to remove some code instead of entering a new one? Since you said that the problem was the custom CSS. As mentioned earlier, this code was copied from the “Craft-template”. Here is what has been put in;

/* ===========================
// TABLE OF CONTENTS
// ---------------------------
//   01. Reboot
//   02. Shared Content
//   03. WooCommerce
//   04. Blog
//   05. Recent Posts
//   06. Pagination
//   07. Footer
//   08. Hidden Elements
//   09. Responsive Styles
// ======================== */

/* Reboot
// ------------------------ */

.x-navbar {
  border: 0;
  box-shadow: none;
}

.x-btn-navbar.collapsed,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none;
}

.entry-wrap {
  border-radius: 0;
  box-shadow: none;
}

.x-btn,
.button,
[type="submit"],
.x-btn:hover,
.button:hover,
[type="submit"]:hover {
  border-width: 1px;
  border-radius: 0px;
  letter-spacing: 0px;
  text-transform: none;
}

.x-nav-tabs > .active > a,
.x-nav-tabs > .active > a:hover {
  box-shadow: none;
}

.x-nav-tabs,
.x-tab-content {
  border-color: white;
  box-shadow: none;
}

.x-alert-block {
  border: 0;
  border-radius: 2px;
  padding: 1.2em 1.15em;
  box-shadow: none;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  height: 3.1em;
  border-color: rgb(217, 217, 217);
  border-radius: 0;
  font-size: 16px;
  box-shadow: none;
  transition-duration: 0s;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  box-shadow: none;
}

.x-container.offset {
  margin-top: 45px;
  margin-bottom: 80px;
}



/* Shared Content: Blog,
// WooCommerce, and Recent
// Posts
// ------------------------ */

.entry-product,
.has-post-thumbnail .entry-featured,
.blog .x-main.full > article,
body .x-recent-posts a {
  border: 0 !important;
  box-shadow: none;
}

.entry-product,
.blog .x-main.full > article,
body .x-recent-posts a {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.01),
              0 6.7px 5.3px rgba(0, 0, 0, 0.018),
              0 12.5px 10px rgba(0, 0, 0, 0.035),
              0 22.3px 17.9px rgba(0, 0, 0, 0.032),
              0 41.8px 33.4px rgba(0, 0, 0, 0.03),
              0 100px 80px rgba(0, 0, 0, 0.01);
  transition-duration: 0.3s;
  transition-property: box-shadow;
  transition-timing-function: ease-in-out;
}

.entry-product:hover,
.blog .x-main.full > article:not(:first-child):hover,
body .x-recent-posts a:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
              0 6.7px 5.3px rgba(0, 0, 0, 0.028),
              0 12.5px 10px rgba(0, 0, 0, 0.035),
              0 22.3px 17.9px rgba(0, 0, 0, 0.042),
              0 41.8px 33.4px rgba(0, 0, 0, 0.05),
              0 100px 80px rgba(0, 0, 0, 0.07);
}

.woocommerce li.product .entry-header,
.blog .x-main.full > article:not(:first-child) .entry-wrap,
div.x-recent-posts .x-recent-posts-content {
  padding: 1.5625em 1.25em;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 1.75;
  white-space: normal;
  color: #12232e;
}

.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title a,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
  color: #12232e;
}


/* WooCommerce
// ------------------------ */

.woocommerce li.product {
  box-shadow: none;
  overflow: visible;
}

.woocommerce li.product .onsale {
  top: 0px;
  left: -4px;
  width: 5em;
  height: 2.5em;
  border-radius: 0px;
  line-height: 2.5em;
  color: #2d4059;
  text-shadow: none;
  box-shadow: none;
  transform: rotate(-15deg);
  pointer-events: none;
  font-size: 0.95rem;
  background-color:#ffb400;
}

.woocommerce .entry-wrap {
  padding: 45px 0 0;
}

.woocommerce li.product .entry-wrap {
  padding: 0;
  box-shadow: none;
}

.woocommerce li.product .entry-header h3 {
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-weight:400;
}

.woocommerce .price {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.woocommerce li.product .entry-header .price > .amount,
.woocommerce li.product .entry-header .price > ins > .amount {
  font-size: 1em;
  line-height: 1;
  color: currentColor;
}

.quantity input[type="number"] {
  border-color: black;
}

.woocommerce-tabs .x-tab-content .x-tab-pane {
	padding-left: 0;
  padding-top: 0;
}

.woocommerce .quantity input[type="number"] {
  font-size: 16px;
}

.single_add_to_cart_button,
.checkout-button,
.apply_coupon,
.update_cart {
  padding: 0.8em 1.2em;
  text-shadow: none;
}

.woocommerce .cart .actions > input,
.woocommerce .cart .actions > button {
  padding: 0.7em 1.125em;
}

.woocommerce-cart-form,
.woocommerce-cart-form a,
.woocommerce label,
.woocommerce table th,
.woocommerce table td,
.woocommerce .cart_totals,
.woocommerce-order-overview li {
  color: rgba(0, 0, 0, 0.8);
}

.woocommerce-cart-form table th {
  padding: 3em 0.652em 3em 0;
}

.cart_totals table td,
.cart_totals table th {
  padding: 1em 1em 1em 0;
}

#order_review table td,
#order_review table th {
  padding: 1em 1em 1em 0;
}

.woocommerce-order-details {
  padding: 3em 0em
}

.woocommerce-order-details table td,
.woocommerce-order-details table th {
  padding: 1em 1em 1em 0;
}

.woocommerce-cart-form td {
  padding: 1em 0em;
}

.woocommerce thead {
  text-transform: uppercase;
}

.widget_shopping_cart_content .x-interactive {
  background: none !important;
  border-color: #ebebe7 !important;
  box-shadow: none !important;
}

.woocommerce-checkout form .payment_methods label {
  padding: 0;
}

.woocommerce th {
  font-weight: normal;
}

.woocommerce table td,
.woocommerce table tr {
  border-color: #ebebe7;
}

.woocommerce-result-count,
.woocommerce-ordering {
  opacity: 0;
}

.woocommerce li.product {
  margin-bottom: 8.5%;
}

li.woocommerce-MyAccount-navigation-link a {
  padding: 0.9em 1em;
  font-size: 14px;
}

input#rememberme {
  margin-right: 0.5em;
}

.woocommerce-form-login__rememberme {
  padding: 0 0 1em 0;
}

.woocommerce .upsells ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
  box-shadow: none;
  border-radius: 0;
  border: none;
}

.e85-6.x-anchor-toggle .x-graphic-icon[class*="active"] {
  color: #272727;
}

.e85-6.x-anchor-toggle {
  border-radius: 0;
}

.x-masthead .crafty-cart .x-anchor-text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.1rem;
  top: -0.1rem;
  font-weight: normal;
  font-size: 13px;
  background-color: #777;
  color: #fff;
  border-radius: 50%;
  min-width: 1.2em;
  height: 1.2em;
}

.x-masthead .crafty-cart .x-anchor-text span {
  font-size: 10px;
  color: #FFF !important;
}

.woocommerce .cart .actions .coupon {
  padding-top: 4em;
}



/* Blog
// ------------------------ */

/*
// Main Layout
*/

.blog .x-main.full {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.blog .x-main.full > article {
  width: 30.333%;
  margin-top: 4em;
  margin-left: 1.5%;
  margin-right: 1.5%;
}


a.entry-thumb:hover img {
  opacity: 1;
}

.entry-thumb {
  background-color: transparent;
}


/*
// First Blog Entry
*/

.blog .x-main.full > article:first-child {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.blog .x-main.full > article:first-child .entry-featured,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.blog .x-main.full > article:first-child .entry-featured {
  flex: 0 1 31.22%;
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb,
.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  flex: 1 0 0%; 
}

.blog .x-main.full > article:first-child .entry-featured .entry-thumb img {
  object-fit: cover;
}

.blog .x-main.full > article:first-child .entry-wrap {
  flex: 1 0 0%;
  padding: 45px;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-title {
  font-size: 2.45em;
  line-height: 1.3;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt {
  margin: 40px 0 0;
  font-size: 1.25rem;
}

.blog .x-main.full > article:first-child .entry-wrap .entry-content.excerpt .more-link {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.085em;
  line-height: 1;
  text-decoration: underline;
  text-transform: uppercase;
  color: #272727;
}


/*
// Single Post
*/

.single-post .x-main {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.9;
}

.single-post .entry-featured {
  position: relative;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.single-post .entry-featured:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 70%, #ffffff);
}

.single-post .entry-featured img {
  height: 400px;
  object-fit: cover;
}

.single-post .x-main .entry-content {
  font-size: 1em;  
}

.single-post .entry-wrap {
  padding: 0;
}

.single-post .entry-wrap .entry-title,
#reply-title {
  position: relative;
  z-index: 2;
  font-size: 3.05rem;
  line-height: 1.3;
}

.single-post .entry-wrap .entry-title {
  margin-top: -0.64em;
  text-align: center;
}

.single-post .entry-wrap .entry-title:after {
  content: "";
  display: block;
  width: 100%;
  max-width: 3em;
  height: 1px;
  margin: 1em auto;
  background-color: currentColor;
  opacity: 0.33;
}

#reply-title {
  margin-top: 3.05em;
}

.logged-in-as {
  font-size: 1em;
  line-height: 1.4;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-rating label,
.comment-form-comment label {
  font-size: 1em;
  color: currentColor;
}

.comment-form-comment textarea {
  min-height: 200px
}

.form-submit {
  margin-top: 1em;
}



/* Recent Posts
// ------------------------ */

div.x-recent-posts a {
  border-radius: 0;
  padding: 0;
}

div.x-recent-posts .x-recent-posts-img {
  border-radius: 0;
  padding-bottom: 120%;
}



/* Pagination
// ------------------------ */

body .x-pagination {
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 100px 0 100px 0;
}

body .x-pagination a,
body .x-pagination span {
  width: 50px;
  height: 50px;
  border: 1px solid #272727;
  border-radius: 0;
  padding: 0;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-shadow: none;
  vertical-align: middle;
  color: #272727;
  box-shadow: none;
}

body .x-pagination a:hover {
  color: #c8493f;
  border-color: #c8493f;
}

body .x-pagination span.current {
  text-shadow: none;
  color: white;
  background-color: #272727;
  box-shadow: none;
}



/* Footer
// ------ */

.x-colophon.top {
  border: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
}

.x-colophon.top .widget {
  text-shadow: none;
}

.x-colophon.top > .x-container {
  width: 100%;
  max-width: none;
}



/* Hidden Elements
// ------------------------ */

.description_tab,
a.entry-thumb:hover:before,
.woocommerce .product-remove,
.x-recent-posts .x-recent-posts-date,
.woocommerce li.product .entry-header .button,
.woocommerce li.product:hover .entry-header .button,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-content.excerpt {
  display: none !important;
}


/* Responsive Styles
// ------------------------ */

@media (max-width: 1050px) {
  .footer-form input[type="text"] {
    width: calc(100% - 102px);
  }  
}

@media (max-width: 767px) {
  .blog .x-main.full > article,
  .blog .x-main.full > article:first-child .entry-featured,
  .blog .x-main.full > article:first-child .entry-wrap {
    width: 100%;
    flex: 1 1 auto;
  }
  
  .blog .x-main.full > article .entry-featured .entry-thumb img {
    max-height: 320px;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .single-post .has-post-thumbnail .entry-featured {
    float: none;
    width: auto;
    margin-right: 0;  
  }  
}




.woocommerce .flex-control-nav.flex-control-thumbs {
    position: relative;
    width: 100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}



.x-header-landmark {
display: none !important;
}


@media (max-width: 480px)
{
    .woocommerce-result-count, .woocommerce-ordering
    {
        display: none;
    }
}

Finally, I was hoping you know what the cause may be on another page. I has the problem on several sites. Link in private note below. Since the problem was with WooCommerce, I can not do the same there. WooCommerce has not been added to this.

Again, thanx a lot

[tristup]

Hi @pcnordhaug,

Although investigating the custom CSS code is not in the scope of theme support. Still, I would like to point the CSS code which is the reason behind your issue.

.woocommerce-result-count,
.woocommerce-ordering {
    opacity: 0;
}

You can find the code around line number 315 in your given code.

Thanks