Right-Aligning Bullet Points

[weatherstone]

Hello,

I am currently wrapping up a website I am transferring to X for a client: http://wordpress-85748-402880.cloudwaysapps.com/services/.

If you will visit the page I provided the link to above, you will note this section: prntscr.com/i8b711. I would like to align the bullet points to the right without stretching the bullet points like this: https://prnt.sc/i8b8hs. Simply right-aligning the bullet points will not work. Is that achievable?

Thank you,
J

[paul.r]

Hi J,

Yes, that is achievable.

Please add my-list in the class field of all your text element where you have added your lists.

Then add the code below in Theme Options > CSS

.x-text.my-list {
   clear: both;
    float: right;
    display: block;
}

Hope this helps

[weatherstone]

This solution works really well, just not on mobile devices. It’s fine on iPads, but not iPhones. Can you kindly tell me how to center everything on small screens?

Thank you,
J

[jade]

Hi J,

Please add a class to the headline, gap, and the image elements then add this CSS as well (assuming that the class you have added is center-mobile):

@media (max-width: 480px) {
    .my-list {
        width: 100%;
    }

    .my-list ul {
         width: 140px;
         margin: 0 auto 20px !important;
         float: none;
    }

    .h-custom-headline.center-mobile {
         text-align: center !important;
    }

    .x-line.center-mobile {
        margin: 20px auto !important;
        float: none;
    }

    .x-img.center-mobile {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }    
}

Hope this helps.

[weatherstone]

Good afternoon,

While this solution worked, it is not applying on iPhones held horizontally rather than vertically. Additionally, four of the images have a -20px margin applied to them. Can that be removed on mobile?

Thank you,
J

[ruenel]

Hello There,

The given code above will only work for portrait mode. If you want to also include the landscape, please replace @media (max-width: 480px) { with @media (max-width: 767px) {.

Hope this helps. Kindly let us know.