Move Text on Irregular List

[toedt]

Hi,

Would it be possible to have the post title be on the side of the image on an irregular list instead of half on the image?

This is the page I’m working on: https://www.teodellatorre.com/homepage-wip/

I’d like to have the titles to the right for left-sided images and to the left for right-sided images. So the text is on the white next to the image

Thanks

[SeaTheme]

Hi,

I don’t know if I understood your question. Please paste the custom CSS code to “Appearance > Customize: Additional CSS”, to check if fit your requirement.

.cusl-text-top-right .cusl-style-tit-wrap, .cusl-text-bottom-right .cusl-style-tit-wrap {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.cusl-text-top-left .cusl-style-tit-wrap, .cusl-text-bottom-left .cusl-style-tit-wrap {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[toedt]

Hey,

Thanks, that’s perfect on desktop! Is there any way of having the text moved in the same way on mobile?

Thanks.

[SeaTheme]

Welcome, the custom CSS for mobile:

@media (max-width: 480px) {
.responsive-ux .cusl-text-top-right .cusl-style-tit-wrap, .responsive-ux .cusl-text-bottom-right .cusl-style-tit-wrap {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.responsive-ux .cusl-text-top-left .cusl-style-tit-wrap, .responsive-ux .cusl-text-bottom-left .cusl-style-tit-wrap {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
 }
}

[toedt]

Hey,

Thanks for that. Is there any way to adjust the text for each individual image or “tile” on the irregular list (on mobile – desktop works great)? The code you sent above edits the position of all the right-sided and all the left-sided images’ texts at the same time.

I’d love to be able to edit each individual one because the words are all of different lengths.

Website: https://www.teodellatorre.com/

[SeaTheme]

Hi, welcome

Please add the post ID of each item and text position:

@media (max-width: 480px) {
.responsive-ux .cusl-text-top-right[data-postid="2541"] .cusl-style-tit-wrap {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.responsive-ux .cusl-text-top-left[data-postid="2672"] .cusl-style-tit-wrap {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
 }
.responsive-ux .cusl-text-top-right[data-postid="2540"] .cusl-style-tit-wrap {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.responsive-ux .cusl-text-top-left[data-postid="2560"] .cusl-style-tit-wrap {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
 }
}

You could adjust thetranslateX value for each item.

how to find post ID: https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

Best

[Author]

Posts