Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 17, 2014 at 4:11 am #337119
    djsmbd

    Hello,
    My sitew donot render correctly on the new iphone 6 or 6 plus.
    Please advise.

    musicbydesign.com
    photoboothbydesign.com
    chicagoweddingblog.com

    October 17, 2014 at 2:01 pm #337315
    Yigit

    Hi djsmbd!

    Please add following code to first website

    @media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
height: auto !important; }}

    This one to second website

    @media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 95%;
height: auto !important; }}

    Can you post screenshots showing the issues? I checked your websites on my iPhone 4 and could not see any issues except for logos and these codes should fix them

    Cheers!
    Yigit

    October 17, 2014 at 4:08 pm #337414
    djsmbd

    Hi Yigit.
    I updated to the latest version of enfold. It helped…the only issue now is the logo placement in mobile. You will see the issue on the iphone 4. The logo is overlapped by the menu. The code above did not resolve the issue. You can see it here. musicbydesign.com

    October 17, 2014 at 4:16 pm #337420
    Yigit

    Hi!

    Following code should work 

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img { max-width: 90%; height: auto !important; }}

    Please flush browser cache on your mobile device and refresh your page a few times. If you are using caching/minifying plugin, please flush their settings as well

    Cheers!
    Yigit

    October 17, 2014 at 5:54 pm #337474
    djsmbd

    Hi!

    I added your code and the logo resolution is perfect, however the placement still overlaps.
    Below is all the code in the Quick CSS, including the most recent code you wanted me to add.

    .header_color .main_menu ul{
    background-color: rgba(255,255,255,.6) !important;
    }
    @media only screen and (max-width: 767px){
    .responsive .mobile_slide_out .logo img {
    width: 80%;
    height: auto !important;
    padding-top: 15px;
    }
    }
    @media only screen and (max-width: 767px) {
    .phone-info{
    text-align: center;
    float: none !important;
    height:55px;
    }
    .phone-info span{
    position: relative;
    left: -8px;
    top: 4px;
    }
    }
    .avia_transform .avia_animated_image {
    opacity: 1;
    }
    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img { max-width: 90%; height: auto !important; }}

    October 19, 2014 at 5:40 am #337860
    Ismael

    Hey!

    Thank you for the info.

    I checked the site and the logo is not overlapping the mobile menu. Please add this to adjust the vertical position of the logo:

    
@media only screen and (max-width: 767px) {
.responsive .logo {
float: left;
top: 10px;
position: relative;
}
}

    Cheers!
    Ismael

    October 20, 2014 at 8:14 pm #338599
    djsmbd

    Hi Ismael,

    Here is a screen shot of what I am seeing on my Iphone 5…the menu overlaps the logo.
    http://musicbydesign.com/wp-content/uploads/2014/10/IMG_2284.png

    October 21, 2014 at 8:35 pm #339227
    Yigit

    Hi!

    Please try adding following code to Quick CSS

    @media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img { max-width: 80%; margin-left: 0!important; }}

    Cheers!
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.