Page title moved vertically in product category pages

[ehandelsfabriken]

I noticed that the page title has moved vertically in product category pages unlike in other pages. Even in your demo. Take a look at http://joyn.swiftideas.com/product-category/slip-ons/. You can see that the page title isn’t centered vertically. Same goes for the WooCommerce sorting dropdown.

This isn’t the case in other pages where the page title is centered vertically as it should.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.page-heading .heading-text, .fancy-heading .heading-text {
    float: left;
    margin-top: -4px;
}

Thanks
Mohammad

[ehandelsfabriken]

Just noticed that it still doesnt look good on an ipad. Goes for any of the product category pages like http://dev.designlina.se/produkter/armband/. I am not sure if the issue with displaying the category title has to do with it but my product images looks smaller than the ones in your demo at http://joyn.swiftideas.com/shop/?sidebar=left-sidebar. Note that its the same images from the demo content. Both pages use a left sidebar so the images should be the equal in size but my images looks smaller. Why?

Please note that any suggestions to custom css must work with another issue. Refer to the link below.

Hero headline not centered

[Mohammad – SUPPORT]

Hi,
I see that Mr. Laranz provide you the solution of this issue. Please follow your another topic.
Thanks
Mohammad

[ehandelsfabriken]

The code for the category issue that you gave me works fine for laptop display but look at the page http://dev.designlina.se/produkter/armband/ on an ipad or equal and you will see that your code didnt fixed the issue for mobile device display. It does not look good at all on an ipad. Maybe Ed could help us out?

[Mohammad – SUPPORT]

Hi,
Please attach me marked screenshot with ipad display.
Thanks
Mohammad

[ehandelsfabriken]

iPad vertical: https://dl.dropboxusercontent.com/u/22182623/Foto%202015-01-20%2011%2039%2055.png

iPad horizontal: https://dl.dropboxusercontent.com/u/22182623/Foto%202015-01-20%2011%2039%2050.png

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.page-heading .heading-text, .fancy-heading .heading-text {
    float: left !important;
    text-align: left !important;
}

Thanks
Mohammad

[ehandelsfabriken]

This is what I have now:

.page-heading h1, .page-heading h3 {
  text-align: center;
}

.page-heading .heading-text, .fancy-heading .heading-text {
  float: left !important;
  text-align: center !important;
}

The problem is the class “heading-text” which is supposed to be centered at the blog page and to the left at the product category page.

With the above code it looks good at http://dev.designlina.se/produkter/armband/ but not at http://dev.designlina.se/blogg/ since it’s not centered. Also, does the theme use different class id’s for the header when displayed on a mobile device?

The two heading-text should have different id’s so that they dont mess with each other.

I really feel we should ask Ed to take a look at this because it feels like we are all guessing and coming to no solution. This is really a css bug since it can clearly be seen at your demo http://joyn.swiftideas.com/product-category/creepers/. The headline isn’t centered vertically. And your custom css solutions is making other css classes behave weird. Like Hero headings for example.

[Mohammad – SUPPORT]

Hi,
Please remove this one custom css code:-

.page-heading .heading-text, .fancy-heading .heading-text {
  float: left !important;
  text-align: center !important;
}

And use this one new custom css code:-

.tax-product_cat .page-heading .heading-text, .tax-product_cat .fancy-heading .heading-text {
  float: left !important;
  text-align: center !important;
}

.page .page-heading .heading-text{width:100%}