Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 9, 2016 at 8:14 pm #580542
    mcraig77

    Ahoy I was hoping you can help me make the mobile view of my site look a tad cleaner.

    Right now the button and phone number that I added to the “header” on the right overlaps the logo when I minimize…

    anyway to fix this?

    February 11, 2016 at 8:01 am #581474
    Ismael

    Hi mcraig77!

    Thank you for using Enfold.

    I think its better if you hide the button on mobile view and then add it somewhere else. Maybe, below the slider? Will that work? You can toggle the display of the elements by using css media queries. Example here: https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263

    Regards,
    Ismael

    February 12, 2016 at 2:17 am #581970
    mcraig77

    I’m totally cool with hiding that header addition for mobile… and than adding a mobile button view. How would I do that exactly I was a little confused by the example…

    February 13, 2016 at 10:00 am #582655
    Vinay

    Hi!

    As Ismale mentioned to hide and display elements please follow the post link

    If you need more control on ALB elements enable custom css class support and add custom class and target them via css http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    To push the button a little below so it won’t overlap the logo please add the below code to Enfold > General Styling > Quick CSS

    
@media only screen and (max-width: 768px) {
#header .widget {
    padding-top: 140px;
}
}

    Cheers!
    Vinay Kashyap

    February 24, 2016 at 6:31 pm #588578
    mcraig77

    HI guys –

    Still having some issues with this. I added this code and enabled css 

    @media only screen and (max-width: 768px) {
.header { display: none !important; }}

    but the button is still there… I have to do this for a couple of sites I;m working on so If you can be as detailed as possible so I dont have to bug you again.

    February 26, 2016 at 1:48 pm #589762
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 768px) {
#header .widget .avia-button-wrap {
    display: none !important;
}}

    Regards,
    Yigit

    February 26, 2016 at 10:29 pm #590041
    mcraig77

    Thanks!

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