Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #544317

    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

    #544684

    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

    #545021

    Haha sorry I thought I had.

    #545288

    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

    #545342

    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

    #545533

    Hey!

    Add this.

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

    Regards,
    Elliott

    #545757

    Awesome – thanks, guys! Sorted now.

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