Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 19, 2017 at 6:13 pm #824097
    midudek1

    Dear Support,
    Right now my mobile version of a page looks like in the link below
    https://drive.google.com/open?id=0B4frn1KZIMB8NU5wRXZYbk1HcUk

    How can I adjust the social icons so they will be aligned to the left, the email address will be near envelope and additional line will be removed? I would like to achieve following layout
    https://drive.google.com/open?id=0B4frn1KZIMB8czRyUkFOZlk5cTA

    Thank you for your help.

    Best regards,
    MD

    July 19, 2017 at 6:39 pm #824106
    midudek1

    Enabling follow up email notification …

    July 20, 2017 at 1:06 pm #824559
    midudek1

    Anyone?

    July 20, 2017 at 7:04 pm #824804
    Victoria

    Hi MD,

    By commenting on the thread you are putting it to the end of the queue and so we don’t get to it, since it has been updated.
    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 21, 2017 at 1:05 am #824916
    midudek1

    Dear Victoria,
    Okay, understood the queue thing. The site is not available as I am doing all the changes in the development environment. What additional information do you need? I can give you the information from the inspector if you wish.

    Best regards,
    MD

    July 22, 2017 at 9:58 pm #828475
    Mike

    Hi,
    Try setting the extra elements > Header Social Icons > display left and Header Phone Number/Extra Info > display left
    postimage

    Best regards,
    Mike

    July 28, 2017 at 12:41 am #830860
    midudek1

    Dear Mike,
    Thanks a lot for your reply!

    Of course I have set the alignment of the social and phone info to the left, but on mobile those setting do not work, but the desktop version is fine.

    Desktop
    https://drive.google.com/open?id=0B4frn1KZIMB8ZzRfRmhzNFZRQkU

    Mobile
    https://drive.google.com/open?id=0B4frn1KZIMB8NU5wRXZYbk1HcUk

    What I want to have on mobile
    https://drive.google.com/open?id=0B4frn1KZIMB8czRyUkFOZlk5cTA

    Best regards,
    MD

    August 1, 2017 at 5:20 am #832560
    Rikard

    Hi MD,

    Thanks for the screenshots and sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#header_meta .container {
  text-align:left !important;
}
}

    Best regards,
    Rikard

    August 1, 2017 at 9:57 am #832725
    midudek1

    Dear Rikard,
    I just tested it and it does not work. The behavior is exactly the same as presented in the screenshots in my previous post.

    Best regards,
    MD

    August 2, 2017 at 6:20 am #833175
    Rikard

    Hi,

    Ok, please try this instead:

    @media only screen and (max-width: 767px) {
#header_meta .container .phone-info {
  text-align:left !important;
}
}

    Best regards,
    Rikard

    August 2, 2017 at 4:41 pm #833548
    midudek1

    Dear Rikard,
    It partially worked … now the mobile version looks like that
    https://drive.google.com/open?id=0B4frn1KZIMB8UUhRaWZpWklTclU

    What I want to have is presented below
    https://drive.google.com/open?id=0B4frn1KZIMB8czRyUkFOZlk5cTA

    My CSS for Mobile and Tablets are the following

    
@media only screen and (max-width:767px)
{
    #header_meta .container .phone-info
    {
       text-align:left !important;
    }

    #top #header .social_bookmarks
    {
        display: block !important;
    }
    
    .logo img
    {
        opacity: 0 !important;
    }
    
    .logo a
    {
        background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: 50% 50% !important;
    }
    
    /* remove main layer slider banner */
    #layer_slider_1
    {
        display: none !important;
    }
}

    Best regards,
    MD

    August 2, 2017 at 5:25 pm #833568
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 480px) {
.responsive #top #wrap_all #header .social_bookmarks {
    width: 110px;
    float: left;
}
.responsive .phone-info {
    width: auto;
    float: left;
    clear: none;
}}

    Best regards,
    Yigit

    August 3, 2017 at 1:55 pm #833883
    midudek1

    Dear Yigit,
    It works like a charm! Thank you very much for your help!

    You can close the issue.

    Best regards,
    MD

    August 3, 2017 at 2:02 pm #833887
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Social icons + phone info on small screens / mobile’ is closed to new replies.