Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 9, 2018 at 2:35 pm #895252
    KingFilly

    HI Moderators,

    I would like to move my phone number and email-adres (in the top header widget) a bit to the right on mobile view.
    Now the phone number falls off the screen.

    Can you guys help me out with this?

    Regards filip

    January 10, 2018 at 7:08 am #895530
    Rikard

    Hey KingFilly,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.phone-info {
  padding-left:30px !important;
}
}

    Best regards,
    Rikard

    January 22, 2018 at 10:10 am #900716
    KingFilly

    Hi Rikard,

    Thank you for your reply.

    Unfortunately it doesn’t work properly.
    When i copy this code it the text ‘falls’ off the screen on mobile. (with padding left: 30 px)
    Under 4px it breaks the line on mobile.
    So when >4px it shows one line but the text falls off the screen.

    I made screenshots and added imgur links in the private section.

    What i try to accomplisch is:
    – or the phone info and email on 1 line.
    – or the phone info and email on 2 line, aligned to the left of the screen.

    Hope you guys can help me out.

    January 23, 2018 at 5:51 am #901168
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 768px) {
.responsive .phone-info {
    width: 100% !important;
    text-align: left !important;
}
}

    Best regards,
    Rikard

    January 24, 2018 at 10:14 am #902018
    KingFilly

    Hi Rikard,

    This doesn’t work either. I think it conflicts with other Quick CSS that i added.
    Can you take a look in the Quick CSS field? I will create a temporary access for you.
    See the access link in the private content.

    Important is that the other layout in the sub header stays the same:
    On desktop:
    – linkedin logo top right.
    – phone info and email on the right, next to LinkedIn logo.
    – Logo aligned to the left.

    On Mobile:
    – Linkedin logo top right
    – phone info and email top left. I prefer in 1 line, but phone nr and email on 2 lines aligned to the left (above logo) is also acceptable.

    Hope you can help me out.

    January 25, 2018 at 8:32 pm #903016
    KingFilly

    any help on this guys?

    January 29, 2018 at 6:38 am #904082
    Ismael

    Hi,

    Please add this code in the Quick CSS field.

    @media only screen and (max-width: 768px) {
    .responsive .phone-info {
        width: 285px;
        float: right;
        clear: none;
    }

    .responsive #header .social_bookmarks {
        width: auto;
        padding-left: 10px;
    }
}

    Best regards,
    Ismael

    January 30, 2018 at 10:50 am #904703
    KingFilly

    Like a charm Ismael!

    thanks for the solution. You can close this thread now.

    January 31, 2018 at 6:11 am #905368
    Ismael

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Move phone info to right on mobile screen’ is closed to new replies.