Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #240752

    I have an interesting situation which I hope you can help me with.
    I created a header as you can see in this screenshot (http://prntscr.com/32hc7s)
    It has a link that people can click to make an appointment and a telephone number.
    In my iPhone, that same information does not appear very well as you can see in this screen shot (http://prntscr.com/32hcem).
    Can you recommend how I can format this so that it appears better in iPhones and other mobile devices?
    Thank you,
    Dan

    #240759

    Hey Dan!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 480px) { 
    .responsive.social_header .phone-info { line-height: 20px; }}

    Cheers!
    Yigit

    #240768

    This does not appear to work. Could there be something very small wrong with the code you provided?
    @media only screen and (max-width: 480px) {
    .responsive.social_header .phone-info { line-height: 20px; }}

    #241165

    Hello Yigit:
    yesterday, you provided me with some CSS to correct the issue I was having. However, the CSS did not change anything. Is it possible that there is a small issue withe the CSS you provided?
    Thank you very much for your help!
    Dan

    #241536

    Hey!

    Can we see the site live with the css added in?

    Regards,
    Devin

    #241601

    Devin:
    The site is LIVE with the CSS added. Here is a screenshot showing the CSS I added:
    http://prntscr.com/331rfv
    Is the CSS correct???
    Dan

    #241741

    Hey!

    Please place all media queries at the very bottom of Quick CSS or custom.css. We need to see the actual website. Please post the link here.

    Cheers!
    Ismael

    #241786

    Ismael:
    This is the CSS that I was provided by Yigit:
    @media only screen and (max-width: 480px) {
    .responsive.social_header .phone-info { line-height: 20px; }}

    This was supposed to fix the problem that you can see in this screenshot:
    http://prntscr.com/33c5ls
    This is a screenshot from my iPhone. Notice how the top text (Click Here to Make an Appointment or Call (212) 779-0468) does not appear properly. On a desktop browser, the text appears fine: http://prntscr.com/33c60i
    As I wrote before, I think that there may be a problem with the CSS that was porovided by Yigit:
    @media only screen and (max-width: 480px) {
    .responsive.social_header .phone-info { line-height: 20px; }}
    Would you be kind enough to check this on your end?
    Thank you,
    Dan

    #241812

    Ismael:
    Did I provide all the necessary information in response to your previous message? Can you inspect the code I was provided and tweak this so that it works?
    Thank you,
    Dan

    #241911

    Hi!

    Please use this to change the font size on mobile device:

    @media only screen and (max-width: 480px) {
    .av_phone_active_right .phone-info {
    width: 100%;
    text-align: center;
    font-size: 11px;
    }
    }

    This should fix the layout. It does on my end.

    Cheers!
    Ismael

    #242035

    Hello Ismael:
    Unfortunately, your code did not correct the problem.
    1. Here is a screenshot showing the implementation of your code: http://prntscr.com/33ngj1
    2. Here is a screenshot from my iPhone: http://prntscr.com/33ngdl

    Can you help me?
    Dan

    #242534

    Hi!

    The font size is not changing. Please use this:

    @media only screen and (max-width: 479px) {
    .av_phone_active_right .phone-info {
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    }
    }

    Cheers!
    Ismael

    #242769

    Hello:
    Unfortunately, the change you proposed has not made any difference. Please see the following screenshot:
    http://prntscr.com/33z6bx
    Can someone at Kriesi help me with this situation?
    Thank you,
    Dan

    #242772

    Hey!

    I’m sorry. Make sure that you remove browser cache then reload the page a few times. Please use this:

    @media only screen and (max-width: 480px) {
    .responsive.social_header .phone-info, .responsive.social_header .phone-info a {
    text-align: center;
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
    font-size: 11px !important;
    }
    
    .responsive.social_header .phone-info a {
    clear: both;
    display: block;
    margin-bottom: 2px;
    padding: 3px 0;
    }
    }

    The header should look like this:

    Regards,
    Ismael

    #242776

    Ismael:
    I am using iPhone 5S with latest operating system. My screen looks like this:
    iPhone Screenshot
    http://www.acunyc.com/screenshot.png
    Any ideas how to make my page look on an iPhone like your screenshot?
    Dan

    #244136

    Hi!

    Please try adding following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
    #header_main { margin-top: 30px; }}

    Cheers!
    Yigit

    #244311

    Thank you very much Yigit.

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Editing Mobile Version of Site’ is closed to new replies.