Permanent Mobile View

  • Resolved harisrethink

    (@harisrethink)


    8 years, 6 months ago

    Hi,

    I’ve got a subscription popup on my site.

    I would like to be able to use the class wpoi-small permanently, as supposed to only being used on mobile.

    Is there any way for this to be done.

    Kind Regards

    Haris

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    8 years, 6 months ago

    Hey @harisrethink,

    Hope you’re well.

    Because of there is no filter for that, there is no easy way to add extra classes into HTML codes.

    But you can do CSS changes with custom CSS. Here I copy the wpoi-small styles and changed them for wpoi-optin, you can put them to custom CSS panel.

    
.wpoi-optin .wpoi-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.wpoi-optin .wpoi-container .wpoi-aside,.wpoi-optin .wpoi-container .wpoi-aside-x,.wpoi-optin .wpoi-container .wpoi-aside-xl {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media (max-width: 770px) {
    .wpoi-optin .wpoi-container .wpoi-element .wpoi-content {
        max-height:170px;
        overflow-y: auto
    }
}

.wpoi-optin .wpoi-mcg-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.wpoi-optin .wpoi-mcg-options:before,.wpoi-optin .wpoi-mcg-options:after {
    display: none
}

.wpoi-optin .wpoi-mcg-options .wpoi-mcg-option {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 0;
    margin-bottom: 5px
}

.wpoi-optin .wpoi-mcg-options .wpoi-mcg-option:last-child {
    margin-bottom: 0
}

.wpoi-optin form .wpoi-element.wpoi-provider-args>.wpoi-container>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element {
    padding: 10px
}

.wpoi-optin form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.wpoi-optin form .wpoi-element:last-child {
    margin-bottom: 0
}

.wpoi-optin .wpoi-mcg-common-fields {
    height: auto
}

.wpoi-optin .wpoi-fields-joined .wpoi-element {
    margin-right: 0;
    margin-bottom: 1px
}

.wpoi-optin .wpoi-fields-separated .wpoi-element {
    margin-right: 0;
    margin-bottom: 10px
}

.wpoi-optin .wpoi-button {
    -webkit-box-flex: 0;
    -ms-flex: 0 36px;
    flex: 0 36px
}

.wpoi-optin .wpoi-button.wpoi-button-big {
    -webkit-box-flex: 0;
    -ms-flex: 0 36px;
    flex: 0 36px
}

.wpoi-optin .wpoi-image-right,.wpoi-optin .wpoi-image-below {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.wpoi-optin .wpoi-image {
    -webkit-box-flex: 0;
    -ms-flex: 0 150px;
    flex: 0 150px;
    min-height: 150px
}

.wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image,.wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image>div {
    border-top-right-radius: inherit
}

.wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-right .wpoi-image,.wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-right .wpoi-image>div {
    border-top-right-radius: 0
}

.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(1) {
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit
}

.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2)>.wpoi-container {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit
}

.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(1) {
    border-top-right-radius: 0
}

.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2),.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2)>form,.wpoi-optin>.wpoi-container.wpoi-image-left>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2)>.wpoi-form {
    border-bottom-left-radius: inherit
}

.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(1) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit
}

.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2) {
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2)>.wpoi-container {
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(1) {
    border-top-right-radius: inherit
}

.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2),.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2)>form,.wpoi-optin>.wpoi-container.wpoi-image-right>.wpoi-element:nth-child(2)>.wpoi-container>.wpoi-element:nth-child(2)>.wpoi-form {
    border-bottom-left-radius: 0
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(1) {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(1) .wpoi-image {
    border-top-right-radius: inherit
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(1) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(1)>.wpoi-element:not(.wpoi-image) {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(2) {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(1) {
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(1) .wpoi-image {
    border-top-right-radius: inherit
}

.wpoi-optin .wpoi-image-left>.wpoi-element:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(1) {
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(1) .wpoi-form {
    border-bottom-left-radius: inherit
}

.wpoi-optin .wpoi-image-right>.wpoi-element:nth-child(2) {
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0
}

.wpoi-optin form.wpoi-col>.wpoi-element {
    height: inherit;
}

.wpoi-optin form>.wpoi-element {
    height: inherit;
    margin-bottom: 1px;
}

    I hope that helps!

    Cheers,
    Oguz

    jdailey

    (@jdailey)

    8 years, 6 months ago

    Thank you for using Hustle. I am going to close this ticket for now. If you still need assistance let us know and we can reopen the thread.

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

The topic ‘Permanent Mobile View’ is closed to new replies.