Responsive Header

[Mary Pearson]

I have a few websites that I’ve created with GeneratePress theme. Most look OK on iPhone, but not http://ESILMarketing.com

What do I need to do to make this header look right on iPhone?

Many thanks!

[Tom]

Hi Mary,

It looks like you’re using some sort of script/plugin to display the header text like that?

You may have to ask the developer/consult the documentation to see if they have a mobile option, as every letter is wrapped in a element and sized/styled independently. It would be a lot of code to try and force it to be mobile.

I’m assuming the script has some sort of turn off/mobile function.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mary Pearson]

Thanks Tom. I asked him about it and he said

To change the font size in a responsive-way you should use the @media queries (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp). It’s strictly related to your theme css and not to cooltext.

So before I start reading about @media queries I thought I’d ask you.

[Mary Pearson]

Could I ask you to look at another website please. I’m just starting it. It’s at http://mapenterprises.ca/

I just have a header image that is 960 x 350. Again, on the phone it does not shrink down. What do I need to do to make it viewable on cell phone.

Thanks!

[Tom]

Yikes, not sure why he would say that – is it a plugin or a custom function from a developer? Each letter is wrapped in its own element, so using media queries would be a huge job. Maybe wrap that entire area in a div with a specific class, and add a mobile friendly header below using another class, then do this:

.mobile-header {
      display: none;
} 

@media (max-width:768px) {
      .mobile-header {
           display: block;
      }
      .fancy-header {
           display: none;
      }
}

As for the second site – it looks like you’re using a slider plugin? You’ll have to either enable the responsive option inside that plugin, or use a mobile friendly slideshow plugin – same kind of issue as above.

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mary Pearson]

Thanks Tom. I’m not exactly sure how to incorporate this but you’ve given me lots of things to tryout so I’ll play around with them for a bit and see what works best.

Many thanks again!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts