Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 30, 2015 at 9:42 am #544317
    500Webmaster

    Hi,

    We noticed that on both Android and iOS, the logo and additional info (phone number) overlap. On a desktop or laptop device, the logo appears on the left and additional info set to appear on the right – which is exactly what we want. It’s only when using mobile devices that these two overlap. Is there a way to prevent this from happening, such as make the “additional info” appear below the logo on mobile devices?

    These are the Quick CSS codes we’re currently using, perhaps something here is causing the issue:

    .team-member-name, .team-member-job-title, .team-member-description { text-align: center; }
    .team-img-container { margin-bottom: 25px; }
    .team-member-name { color: #02a122; }

    div.phone-info {
    font-size: 20px;
    }

    div.phone-info {
    position: relative;
    top: 60px;
    right: 10%;
    color: #333333 !important;
    }

    .title_container{
    display: none;
    }

    #header_meta { margin-top: -30px; }

    table, td, tr {
    border: 0px !important;
    }

    Thanks

    November 30, 2015 at 6:12 pm #544684
    Elliott

    Hi 500Webmaster!

    Send us a link to your page and we’ll take a look. You can set your reply as private if you wish.

    Regards,
    Elliott

    December 1, 2015 at 10:15 am #545021
    500Webmaster

    Haha sorry I thought I had.

    December 1, 2015 at 3:41 pm #545288
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.phone-info {
    top: 23px!important;
    position: relative;
    font-size: 16px!important;
}}

    Best regards,
    Yigit

    December 1, 2015 at 4:25 pm #545342
    500Webmaster

    Hi Yigit,

    That works thank you, but I do notice that the number looks strange because it’s not really centred. I see in the code that the position is relative, and under Enfold>Header settings, it is set to display on the right which is how it should be for desktop/laptop view. But is there any way to make it centered for mobile view and only mobile view?

    Thanks

    December 1, 2015 at 8:03 pm #545533
    Elliott

    Hey!

    Add this.

    @media screen and (max-width: 767px) {
div.phone-info { right: auto !important; }
}

    Regards,
    Elliott

    December 2, 2015 at 6:27 am #545757
    500Webmaster

    Awesome – thanks, guys! Sorted now.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Mobile Display Issues’ is closed to new replies.