Okay
  Public Ticket #3063602
Step-by-step 2.0 bug
Closed

Comments

  •  4
    Marius Volden started the conversation

    Hello,

    I like the step-by-step 2 for mobile, but it comes with a lot of weird margin bugs that ruin the whole page.

    First of all, it has this 100px of margin above that makes no sense (atleast on phone) that has to be removed manually with CSS "margin-top: -100px;", I can understand that its ment to "look pretty and alone", but in my case it looks really weird on phones, which should make these margins optional. Most people today manage to put their own margin if its necessary, I understand the logic on DESKTOP, but I dont understand it on MOBILE:

    4061096209.png
    7586337816.png


    Second and worst of all, it ruins the <body> line-height on the whole page. (Do not bother about what the text says, but look at the difference):

    Before I add the Step-By-Step v2.0:

    8955677289.png

    After I add the Step-by-step 2.0:

    4365246268.png
    2274002603.png

    This affect ALL TEXT. Literally the <body> line-height:

    8166229452.png

    2116454130.png
  •  2
    Christophe replied

    In addition to this I also reported about a week ago that the Amelia CSS sets the fontsize for body to 100%, causing issues when using 62.5% for the rest of the site in order to easily use rems.

    Developers should realise they should not set CSS rules that can impact other parts of the site

  •  4
    Marius Volden replied

    Yeah, I think its really weird that they do. Considering how easy it is to make own divs & classes or in worst case span.

  •  2,572
    Aleksandar replied

    Hey Marius and Christophe.

    Thank you for your feedback. We forwarded the ticket to our developers so they can work on it for one of our upcoming updates.

    Christophe, the font-size has already been forwarded to them. 

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  8
    Christian replied

    Hey Marius, what's the exact CSS code that you used to remove the top margin?'

  •  4
    Marius Volden replied

    Hello Christian,

    I used -80 margin in advanced settings (on mobile) in "Tatsu", which is a builder very much like Elementor and BEbuilder:

    2144019376.png

    But this should work as CSS fix:

    .amelia-v2-booking #amelia-container.am-fs__wrapper {
        margin: 0px auto !important;
    }

    But be warned, you might wanna leave some space underneath for the drop-shadow to complete so you dont end up like this:

    9167367115.png

    To prevent this you can use this:

    .amelia-v2-booking #amelia-container.am-fs__wrapper {
        margin: 0px auto 60px auto !important;
    }

  •  8
    Christian replied

    Great! Thanks, Marius. It worked great.

    CA