Subheader cut off on mobile

[thepenster]

Hi,

The subheader on my site (diplays.adventium.net) is cut off on iphones. Instead of “Total trade show display solutions”, you only see “solutions” on an iphone.

The subhead does not appear at all on the product, service, about or contact pages on mobile.

Please let me know how to fix.

thank you,
Penny

[Mohammad – SUPPORT]

Hi,
Your website is not loading. Please provide me correct website url.
Thanks
Mohammad

[thepenster]

Here’s the site:
http://displays.adventium.net/

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
 .page-heading{
   margin-top:65px !important;
  }
}

Thanks
Mohammad

[thepenster]

Thank you Mohammed. I have 2 additional questions concerning mobile.

1) How do I reduce the font size in the header and H1 in mobile only (It’s ok on desktop)?

2) On the iphone, is there a way to close the line height of the product listing on top at http://displays.adventium.net/products/? Problem is, it takes up all of the screen space so people may not know they need to scroll down to see the filter results.

thank you!

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option- Adjust the font size value of the h1 has desire.

@media only screen and (max-width: 767px){
.page-heading h1 {
font-size:14px!important;
}
.page-heading {
 margin-top: 0px !important; 
}
.has-no-sidebar .spb_portfolio_widget .filter-wrap {
margin-bottom: 0px!important;
}
ul.portfolio-filter-tabs li.all, ul.portfolio-filter-tabs li.has-items {
line-height: 15px!important;
}
}

-Rui

[thepenster]

Hi,

I changed the h1 font size to 10px and the li line height to 12px, but nothing changed on the iphone.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide admin access to check your current css code?
Use the private reply option.

-Rui

[thepenster]

This reply has been marked as private.

[thepenster]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

It seems you didn’t copy the last closing bracket from my css code.
Just fixed it for you, clear the mobile browser cache and try again.

-Rui

[thepenster]

Hi Rui,

Looks like the subheader is ok on the iPhone, but shows slivers of the text on iPad. Can it be fixed so both are consistent?

Also, on iphone & ipad, how do I fix the “learn more” boxes that are still cut off of at http://displays.adventium.net/services-2/

How do I fix each service box so they are the same size on iPad?

thank you!

[Rui Guerreiro – SUPPORT]

Try the css below to increase the height of the icon box in order to be able to see the buttons in every icon box.

.page-id-12492 .sf-icon-box-animated .front {
height: 270px!important;
}

What you mean exactly when you said “slivers”? Can you take a screenshot with that area marked.

-Rui