Elements in one line

  • Resolved muraux

    (@muraux)


    3 years, 11 months ago

    Hi,

    I want to create a slide-in form like the attached link, where all the information (image, title, content, and opt-in fields) is in one line.

    I’ve tried this code that I’ve found, but it doesn’t work.

    .hustle-layout-body {
display: inline-grid;
    width: 100%;
}
.hustle-layout-form {
    max-width: 800px;
}

    I appreciate any help you can provide.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    3 years, 11 months ago

    Hi @muraux,

    Are you using any existing template or creating a slide-in from scratch? Is it possible to provide a page where you have the slide-in? So that we could provide based on how it’s added to your website? The CSS can vary if there are any custom changes done to the slide-in.

    Please do advise so that we could check further. Looking forward to your response.

    Kind Regards,
    Nithin

    Thread Starter muraux

    (@muraux)

    3 years, 11 months ago

    Hi @wpmudevsupport11,

    Thanks for the replay.

    I’ve created the slide-in form from scratch.
    You can check the form on this site. It’s the form on the bottom of the page.

    Thanks again!

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    3 years, 11 months ago

    Hi @muraux

    You can do something like this:

    https://monosnap.com/file/Yk8rg6yQAdPnL5OKQV3rRUwncSSuIf

    @media only screen and (min-width: 991px) {
    .hustle_module_id_5 .hustle-layout-content{
        display: flex !important;
        flex-direction: row !important;
        align-content: center;
        justify-content: space-around;
        flex: unset;
        width: 100%;
    }
    
    .hustle_module_id_5 .hustle-layout-content .hustle-content{
        flex: initial !important;
    }
    
    .hustle_module_id_5 .hustle-layout-form{
        padding-top: 40px !important
    }
}

    Best Regards
    Patrick Freitas

    Thread Starter muraux

    (@muraux)

    3 years, 11 months ago

    Hi @wpmudevsupport12,

    Thanks for your help!

    I’ve put the code in the “Custom CSS” field, but it seems it doesn’t override the original code.

    Do I need to set anything else to make custom CSS visible?

    Best,
    muraux

    • This reply was modified 3 years, 11 months ago by muraux.
    Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    3 years, 11 months ago

    Hi @muraux

    I hope you’re well today!

    I checked the site and it seems you are using plugin to minify and/or cache assets. This is often the reason for such issues (added CSS not reflected on fron-end) so please check if there’s an option to “regenerate CSS” in your optimization plugin.

    After that clear all cache on site/server. Note: even if there’s no option to regenerate, please do clear all cache and it should help.

    Best regards,
    Adam

    Thread Starter muraux

    (@muraux)

    3 years, 11 months ago

    Hi @wpmudev-support8,

    I hope you’re doing well!

    Thanks for your help.

    The code still doesn’t work. I tried:

    • Deleting the cache on site.
    • Deleted WP Fastest Cache plugin
    • Flushing cache on the server
    • Creating a new slide-in form with the provided code

    I appreciate any help you can provide.

    Best, muraux

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    3 years, 11 months ago

    Hello @muraux !

    There may be the theme or some other plugin interfering then. Maybe a plugin conflict test will help here to discover what exactly is the cause. Here’s the process for the test:

    – take a backup of the site just in case or test on a staging copy of the live site
    – deactivate all plugins except Hustle, switch to default WordPress there such as TwentyTwenty etc.
    – check if the issue still exists
    – if not, activate plugins one by one (or switch to original theme) and check after which plugin the issue comes back

    Please let us know if you manage to find something using this workflow.

    Warm regards,
    Pawel

    Thread Starter muraux

    (@muraux)

    3 years, 10 months ago

    Hi,

    So I’ve tried all the steps on my localhost to ensure that I don’t destroy anything, but the code I’ve put into the Custom CSS still doesn’t work.

    Best,
    muraux

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    3 years, 10 months ago

    Hi @muraux

    The CSS uses

    .hustle_module_id_5

    In case your local site uses a different module ID you would need to update it, but an alternative is to create a Staging https://ww.wp.xz.cn/plugins/wp-staging/ so you can test online but in a safe place.

    Best Regards
    Patrick Freitas

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    3 years, 10 months ago

    Hi @muraux,

    Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open the thread if you need further assistance.

    Best Regards
    Nithin

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Elements in one line’ is closed to new replies.