Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 20, 2014 at 3:50 pm #240752
    bananadan

    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

    March 20, 2014 at 4:03 pm #240759
    Yigit

    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

    March 20, 2014 at 4:16 pm #240768
    bananadan

    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; }}

    March 21, 2014 at 2:08 pm #241165
    bananadan

    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

    March 22, 2014 at 7:45 am #241536
    Devin

    Hey!

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

    Regards,
    Devin

    March 22, 2014 at 2:20 pm #241601
    bananadan

    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

    March 23, 2014 at 5:43 am #241741
    Ismael

    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

    March 23, 2014 at 12:15 pm #241786
    bananadan

    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

    March 23, 2014 at 4:41 pm #241812
    bananadan

    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

    March 24, 2014 at 3:45 am #241911
    Ismael

    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

    March 24, 2014 at 1:04 pm #242035
    bananadan

    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

    March 25, 2014 at 6:25 am #242534
    Ismael

    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

    March 25, 2014 at 3:43 pm #242769
    bananadan

    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

    March 25, 2014 at 3:49 pm #242772
    Ismael

    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

    March 25, 2014 at 4:00 pm #242776
    bananadan

    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

    March 28, 2014 at 1:28 am #244136
    Yigit

    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

    March 28, 2014 at 12:30 pm #244311
    bananadan

    Thank you very much Yigit.

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Editing Mobile Version of Site’ is closed to new replies.