Targeting CSS Path in Pro

Support
#1

Good day. Having used “X Pro” now to build 4 client sites, one of the largest issues I (regularly) encounter is targeting the correct CSS Path. I use the “Inspect” tool in Chrome to identify the path; and often, when I make the edit using the Chrome tool, the change is applied. However, when I actually apply the CSS in the Theme Options CSS section, it is not showing the changes.

For example, I have attached 2 pics showing 3 different sections of the site I am building for a client. Even though I have applied a number of CSS Media Queries successfully on the Home Page, I just cannot seem to get these 3 sections to cooperate. I’m sure there is a simple explanation and something I am just not seeing, but I have spent hours trying without success.

*Please note: these issues are with Media Queries, to adjust the site to display properly on Mobile

The site is not live, but can be viewed at:
http://box5126.temp.domains/~rolloffj/

Any assistance you can provide will be greatly appreciated.

Michael

#2

Hey Michael,

Thank you for reaching out. I tried to check your site but it isn’t loading on my end, can you please double check the URL if it’s correct? In the mean time you can add the !important rule to your CSS to give your changes a high priority e.g:

.your-selector {
    margin-right: 10px !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#3

Nabeel,
Thank you for your response. I’m confused why you are not seeing my development site. When I click on the link in the message I sent here on the forum, it displays fine for me.

As for the CSS tutorial links you sent me, I am familiar with how to find the selector; that is not the issue. As I mentioned, I can find the selector in Chrome “Inspect” tool and I can make the change in the tool, confirming that I have the correct selector. The change shows in the tool, however, when I make the actual change to the CSS in X Theme, it does not implement the change.

#4

Hi @mcaravaglia,

Directly copying the selector and CSS may not work depending on where you’re adding. If it’s on element CSS, then it must use $el selector to make sure it’s applied to current element. Example,

.e17-9.x-bar-container {
    flex: 1 1 0%;
    max-width: 150px;
}

Instead of pasting that entire CSS as is to the Element CSS, then you’ll to change it to something like this

$el.x-bar-container {
    flex: 1 1 0%;
    max-width: 150px;
}

The $el represents the current element selector, which e17-9 may vary so it’s safe to use $el instead. Though, with your current clipping issue, it doesn’t need a custom CSS. Just change the flex styling of the first container where the logo is, to this

The clipping happens since it’s pushed by the first container, hence, changing it size should fix it.

Thanks!

#5

Rad, I never use the element CSS and place all of my CSS in a single location. I use the CSS location in the “Theme Options” section of “X”.

I suspected the logo issue was related to the Flex Styling, but just could not figure out how to fix it. I admittedly don’t fully understand how to use these flex functions and have been unable to find clear, detailed information on using it. Can you direct me to the best documentation for this?

Meanwhile, the settings you gave me worked perfectly, and while I have no clue why, I am grateful for the assistance.

Any suggestions you might have as to why I have been unable to add space and remove space in the two areas indicated in my screen captures, I would be further indebted.

I am grateful for the exceptional support I receive from your team. I have now rolled out 4 websites with X and will continue to use it as my basis for building sites. I don’t think I would be using the theme to the extent I am, if it were not for the help I have received from all of you along the way. Thank you so much.

#6

Hello @mcaravaglia,

You are most welcome.

For your other issue, please remove the 200 pixel width of the headline element for the RollOff Joe. You may adjust the width to a smaller number or simply set to auto. Add a right margin if necessary.

For the Service Area text, the space below the text was contribute with the bottom margin of the row content. Please reduce or adjust the bottom margin to minimize the pace.

Meanwhile, these knowledge base articles might be useful to you:

Best Regards.

#10

Hello @mcaravaglia,

Your replies has been withdraw. Is your issue resolved already?

Kindly let us know.

#11

My issue has been resolved. Thank you again for your help.

#12

You’re welcome. We’re glad your issue’s now resolved.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.