Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 8, 2016 at 9:23 pm #610415
    connect4consulting

    Hi,
    I’m trying to adjust a header widget in mobile view. The site looks perfect for the desktop but on the phone the contact information is overlapping. Please help.
    Thanks.

    April 8, 2016 at 10:09 pm #610426
    Vinay

    Hey connect4consulting!

    Please use the below CSS in Enfold > General Styling > Quick CSS

    @media and screen(max-width:900px) {
    #header .widget {
    left: 50%!important;
    top: 70px;
    z-index: 999;
    transform: translateX(-50%);
 
}}

    Best regards,
    Vinay

    April 8, 2016 at 10:39 pm #610436
    connect4consulting

    Hi Vinnie
    That doesn’t really work – can you take a look on your phone?

    April 10, 2016 at 6:07 am #610728
    Rikard

    Hi,

    There is not enough space on small screens for that information unfortunately, could you try adding it to a widget area above your content instead? We can help you out with hiding it on screens above mobile after you’ve added it. You can hide the header widget on mobile with the following CSS:

    @media only screen and (max-width: 767px) {
#text-2 {
display:none !important;
}
}

    Thanks,
    Rikard

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