CSS Code Change - New Version of Cornerstone

Support
#1

Hi

URL is www.btmv.rest

The following code was used in the previous version of Cornerstone (Themeco X Pro 1.1.0)

@media (min-width:980px) and (max-width:1199px){
.page-id-25 #x-section-3 .x-card-outer .x-card-inner {
min-height: 300px;
font-size: x-small;
}

This code does not work in the upgraded version (Themeco 1.2.3)

I suspect it is either the section identifier (#x-section-3) or the element identifier (.x-card) or both.

Can you please let me know what the new code should be to make this work.

Thanks in advance

Craig

#2

Hi Craig,

The code seems correct and it should be working, you have a code with similar same syntax but targeted to different screen widths which is working fine

@media (max-width: 4000px) and (min-width: 1200px){
.page-id-25 #x-section-3 .x-card-outer .x-card-inner {
    min-height: 420px;
}}

Please check your code for CSS Syntax Mistakes, remember everytime you use a media query (@media… {) when you close it, you will end up with double }} one from the media query itself and another from the code inside it.

Let us know how it goes, if you cant find anything please provide your login credentials in a private reply so we can take a closer look.

Thank you!

#3

Hi Joao

It is most likely a syntax problem - however more complex than just a ‘mistake’.

To be a little clearer, the code I have listed was working perfectly UNTIL the upgrade to Pro 1.2.3. That is, it was working perfectly in X Pro 1.1.0. As soon as the update was complete the code stopped working. In fact ALL of the code I had put in that uses the #x-section-(numeral) stopped working immediately after the upgrade. I had some ‘hide’ statements and some ‘centre’ statements - all stopped working with the upgrade. Again each of these statements was using the the #x-section-(numeral) designation.

I have tried rewriting each and saving - still nothing.

Thanks. Look forward to hearing from you.

Kind regards

Craig

#4

Hello Craig,

I have inspected the page and nothing has change. It still have the same #x-section-{#} ID. You can check it here: https://prnt.sc/gzol05

I also inspected the if the code is working and it is really working because the height of the card is 420px (https://prnt.sc/gzonj8).
https://image.prntscr.com/image/wWEAp6uYSiWL1ljB-hNnPg.png

Please clear your browser cache or use private browsing mode and test your site again.

#5

Hi

Thanks for your response. I understand your point. However I am still confused. My understanding has always been that when css code is added, you can see the change realtime. To be clear, if I use a centering statement on the page css, I will see the change reflected immediately. This was certainly the case with the previous version. However on upgrade, ALL of the css code that has any relation to x-section-(numeral), is NOT reflected realtime. To keep the example real simple, on the page http://www.btmv.rest/vegan-recipes/sunflower-seed-butter/, the second section has a centering statement for the text content listed in the css. In the previous version this worked in ‘real time’ - meaning that as I was editing the page the text appeared entered. As soon as the version was changed, the text no longer appeared entered. If you log on to that specific page you will be able to confirm this. This is exactly the same scenario with the card example previously mentioned.

I can only think of tow possibilities. First, the new version means there is no longer an ability to confirm some css code without ‘going to a live screen’ - surely a backward step. Alternatively it should be representing the change in real time and there is another problem (this would be the ‘problem’ I was writing in for originally).

Thanks for your time. I look forward to hearing from you.

Kind regards

Craig

#6

Hi there,

Are you referring to the builder preview? Or you mean the front page? Does that mean saving works? Would you mind providing a video recording?

Thanks!

#7

Hi

Thanks for your response. I am not quite following your line of questioning. I will try and be clearer.

When I edit a page in pro, I goto the page selection on my dashboard and select the page I want to edit. I then choose 'Edit with Pro. This takes me to the pro page editor/page builder. On the page editor/page builder I have the option to add CSS code (option is on the lower left hand side).

So here is the problem. In the previous version (X Pro 1.1.0) I have entered the following code:

div#x-section-2 .x-column.x-sm.x-1-1 .x-text {
margin: 0 auto !important;
display: block;
}

In the previous version (X Pro 1.1.0) this code would work IN REAL TIME. I would immediately see the text in the relevant section (in the above example Section 2) centred. I did not need to save, or preview - the change was made in real time on the edit screen/page builder.

IMMEDIATELY AFTER THE UPGRADE TO Pro 1.2.3, THIS CODE STOPPED WORKING IN REAL TIME. In other words, when I went into the page builder/edit screen, the text was no longer centred. No other changes were made in order for there to be another problem - it was simply the version upgrade.

On this thread I have provided login details for you to confirm that this has happened. The page in which this can be most easily seen is the page entitled Sunflower Seed Butter. On this page you will see the code as listed above in the CSS editor - but you will see that the code has had NO effect.

I understand that this example is an easy fix by using different code. However I am not after an easy fix - rather an understanding why this code that should be working has stopped working with the upgrade. The reason behind this is that there is other more complex code on my website that is also NOT working. This code ALSO STOPPED working when the upgrade was made. (See page Free Resources - all of the sizing code for each of the cards is NOT being reflected on the page builder.)

It would seem to me that the problem code is the section identifier - but I don’t know.

It is possible that the code will still work in live - but NOT on the page builder. IF this is the case it means that you can no longer see SOME code changes in realtime on the page builder. This is surely a backward step. The other option is that there is a problem with the new version on some types of code.

Thanks for your time and assistance.

Kind regards

Craig

#8

Hello Craig,

Thank you for the clarifications. I can confirm that this is a bug. The reason is that we have changed the IDs which is why in the preview the ID no longer exist and it just appears as a plain section.

I’ve submitted this to our issue tracker so the developers will be made aware of it and take further actions to resolve this issue in the next update release.

Please bear with us.

#9

Hi

Thanks for your response.

I have further tested the code by saving the page http://www.btmv.rest/free-resources/ as a template and then publishing this template on a new page along with the page based CSS code. The results:

The css statement below DOES NOT show correct in preview but DOES show correct in live:

div#x-section-1 .x-column.x-sm.x-1-1 .x-text {
margin: 0 auto !important;
display: block;
}

This one is no big deal as I can simply recode it to a class statement that works.

However . . .

The css statement below DOES NOT show correct in preview and also DOES NOT show correct in live:

@media (min-width:768px) and (max-width:979px){
.page-id-25 #x-section-3 .x-card-outer .x-card-inner {
min-height: 270px;
font-size: xx-small;
}
}

Is there a way to recode this statement so that it will work in live? If so are you able to let me know what that code would be?

If there is no way to recode it I guess this means I can’t edit that page until the next version release is made (assuming that the new release fixes the problem. . .)???

Thanks again for your assistance

Kind regards

Craig

#10

Hi Craig,

We have already fixed this issue on the latest release (Pro 1.2.4 / X5.2.3 / CS 2.1.4).

See the bugfix on the left pane of Changelog page.

But, I’m afraid you’re using the classic section? (did you add that as a template?), because now the sections are not given a generated ID on the front-end, but of a generated CLASS instead. So even if you update to Pro 1.2.4 your custom CSS that use an IDs on the selector might not still work.

What I advice is to update your Pro 1.2.4 and then add your own ID or CLASS to your sections. You should not have relied on this generated ID in the first place because this are dynamics, meaning this can be changed.

Thanks,

#11

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