CSS - Global vs Local issues

[Andreaco]

Hello!

i wrote some custom CSS rules and would need to make them work globally with Global CSS.

It works when:

• CSS Local (in-page)
• Target the section with ID

Doesn’t work when:

• CSS Local (in-page)
• Target the section with CLASS
  or
• CSS Global
• Target the section with ID or CLASS

What am i missing?

Thanks!

[christopher]

Hello Draxdes,

Please get back to us with the exact URL of the website page you are working on and the CSS code you are trying to work with. Then we will be able to help you out and give you proper information.

As a general rule of thumb it is recommended that you add unique classes to the sections or any Elements by clicking the Customize tab and add the class to the proper option:

After that you can add your CSS code to X > Theme Options > CSS. I also suggest that you read this article for more information.

1- I usually find CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[Andreaco]

Hi Christopher,

URL is in secure note, there is only one section in that page, “Media Mentions”.

CSS is both in Page CSS (the only code present there) and Global CSS (at the very beginning, commented as “TEST CSS GLOBAL VS LOCAL”).

I assigned test-id-001 and test-class-001 to the section “Media Mentions” to show you that if you change css to target id or class, it only works with in-page css + #id, and doesn’t work with any other combination.

Thanks

[thai]

Hi There,

There is the default CSS for the responsive is more priori than your custom CSS:

@media (max-width: 767px){
.x-section .x-container.marginless-columns>.x-column[class*="x-"] {
    display: block;
    width: 100%;
    vertical-align: inherit;
}
}

So you need to override this CSS with the ID, the class will not work:

@media (max-width: 767px){
    #test-id-001 .x-column {
        width: 48%;
        float: left;
        margin-right: 2%;
    }

    #gtest-id-001 .x-column:nth-child(2n){
        margin-right: 0;
    }

    #test-id-001 .x-column:nth-child(2n+1) {
        clear: both;
    }
}

For more information, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.