- This topic has 6 replies, 2 voices, and was last updated 5 years, 10 months ago by
Tom.
-
AuthorPosts
-
April 15, 2015 at 10:45 am #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!
April 15, 2015 at 10:17 pm #98900Tom
Lead DeveloperLead DeveloperHi 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-developmentApril 16, 2015 at 4:52 am #99024Mary 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.
April 16, 2015 at 5:42 am #99027Mary 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!
April 16, 2015 at 11:07 pm #99361Tom
Lead DeveloperLead DeveloperYikes, 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-developmentApril 17, 2015 at 3:39 pm #99654Mary 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!
April 17, 2015 at 10:53 pm #99713Tom
Lead DeveloperLead DeveloperNo problem! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.