Help with targeting specific columns for changing the color of some words

Technical Q&A
, , ,
1

Hey

So pretty confusing subject but what I’m currently doing is changing the color of specific words in my sections. So far I havent had any issues until I came upon sections that have columns.

Now my problem is, I don’t know how to target those columns individually so I can change the color of a few words inside.

This is the code im using for 3 sections so far:

setInterval(() => {
    changeColor();
}, 10);

function changeColor() {
    let paragraph1 = document.querySelector("#shopify-section-484ac221-7750-481b-8ad9-9a3557414814 .container .sixteen.columns.text-column");
    let paragraph2 = document.querySelector("#shopify-section-66f0799f-7a42-4714-84ff-d2b2d04e948c > div > div > div > div.rich-text__text.featured_text");
    let paragraph3 = document.querySelector("#shopify-section-cf0f65f3-1b9f-46ac-9b2d-664c0126b416 .psb-partner-heading .psb-utilities-heading__subheading p");

    if (!paragraph1 || !paragraph2 || !paragraph3) return;

    if (window.innerWidth < 756) {
        paragraph1.innerHTML = 
        paragraph2.innerHTML = 
        paragraph3.innerHTML = 
    } else {
        paragraph1.innerHTML = 
        paragraph2.innerHTML = 
        paragraph3.innerHTML = 
    }

All these 3 sections work perfectly. Of course none of these 3 sections have any columns, which is why it works without any problems for me.

Here is the screenshot of which section I want to target

columns.png
columns.png545×859 147 KB

If anyone can help, i’d greatly appreciate it! I’m only using this specific code for mobile as its optimized for that.

URL: jasaoslaj.com