• Resolved Anonymous User 14292521

    (@anonymized-14292521)


    I am using the Awesome Support plugin and noticed that the forms aren’t completely responsive. The Subject, Description, and Product selector elements hang off the side of the container on the Submit Ticket page. I would like to reduce their size to be a certain percentage of the container…

    The “My Tickets” and “Logout” “and Submit” buttons stay in place/are responsive to the size of the screen, as well as the attachments area.

    My question is: Does anyone know the CSS classes and code to use to style the Awesome Support forms?

    I also need to put a white background behind the contents of individual ticket pages (I think they are classified as posts) with a 2 px #333333 border and 10px padding on all sides (i.e. https://cellboosteronline.com/ticket/1292004656/).

    You will probably not be able to see these pages without creating an account/ticket. Appreciate any help with this.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author awesomesupport

    (@awesomesupport)

    Hi:

    That’s weird – the page should be responsive unless the theme installed is somehow not making that work. Here’s an example of the screen when it gets really small – the theme used in this example is DIVI:

    06.12.2018-13.03

    The product drop-down has its own css ID: wpas_product.
    The subject field css ID: wpas_title
    The description field has a class associated with it: wpas-submit-ticket-wysiwyg.

    You should be able to use the CSS inspector in your browser to get the additional wrappers and selectors.

    I hope this helps.

    Thread Starter Anonymous User 14292521

    (@anonymized-14292521)

    Thank you! I was able to change the fields to 90% but, although it looks fine on desktop, it still hangs over on smaller screens. I am using the Avada theme and have followed your guide on compatibility for that theme.

    Thread Starter Anonymous User 14292521

    (@anonymized-14292521)

    Here’s the code I ended up with:

    #wpas_product {
    width: auto !important;
    }

    #wpas_title {
    width: auto !important;
    }

    .wpas-submit-ticket-wysiwyg {
    width: 85% !important;
    }

    #wpas_files {
    width: auto !important;
    }

    .wpas-ticket-details {
    background-color: rgba(255,255,255,1) !important;
    padding: 10px !important;
    }

    The description is still wonky and unresponsive, but looks fine on desktop. I’ll keep working on figuring that out.

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

The topic ‘CSS for Awesome Support’ is closed to new replies.