[Resolved] Responsive Header

Home Forums Support Responsive Header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #98767
    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!

    #98900
    Tom
    Lead Developer
    Lead Developer

    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.

    #99024
    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.

    #99027
    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!

    #99361
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #99654
    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!

    #99713
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.