Overriding built-in Caspio media queries with !important flag

[Gabrielle]

Getting my sign-in form to work the way that I want it to is proving to be problematic because of styles applied to the section that it sits inside of, which has margins and a width applied that I don't want. I can't figure out how to override this code in my own stylesheets because its flagged as important and fairly specific. Is there any way for me to overwrite the code from within Caspio's system?

[kpcollier]

I had this problem with my date and text area fields. I had to use the '>' operator in my CSS rules, in my own media query to make it work. 

@media only screen and (max-width: 1025px) {

.cbFormFieldCell > #EditRecordTech_Schedule_Table_2_Date{
   width:30% !important;
}

.cbFormFieldCell > #EditRecordTech_Schedule_Table_2_Notes{
   width:99% !important;
}

.timeClass{
    width: 96%;
}
  
}

 

[TellMeWhy]

4 hours ago, Gabrielle said:

Getting my sign-in form to work the way that I want it to is proving to be problematic because of styles applied to the section that it sits inside of, which has margins and a width applied that I don't want. I can't figure out how to override this code in my own stylesheets because its flagged as important and fairly specific. Is there any way for me to overwrite the code from within Caspio's system?

Well, you can disable the Responsive and implement your own media query on your styles, this will affect everything tho, So, you will have to set a mobile version style for everything.

 

[telly]

Hi @Gabriel,

You may check this link for media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I hope this helps.

[Gabrielle]

On 4/30/2021 at 5:27 PM, TellMeWhy said:

Well, you can disable the Responsive and implement your own media query on your styles, this will affect everything tho, So, you will have to set a mobile version style for everything.

 

Can you disable responsive for the login page? I didn't see it as an option.

[Gabrielle]

On 5/3/2021 at 7:24 PM, kpcollier said:

I had this problem with my date and text area fields. I had to use the '>' operator in my CSS rules, in my own media query to make it work. 

@media only screen and (max-width: 1025px) {

.cbFormFieldCell > #EditRecordTech_Schedule_Table_2_Date{
   width:30% !important;
}

.cbFormFieldCell > #EditRecordTech_Schedule_Table_2_Notes{
   width:99% !important;
}

.timeClass{
    width: 96%;
}
  
}

 

This worked for me, thank you!!