Jump to content
  • 0

Overriding built-in Caspio media queries with !important flag


Go to solution Solved by kpcollier,

Question

image.png.59bc6f8c2144efebb0c592cd04f16961.pngimage.png.91f0c87a065d2eecf734f2db1c48d86a.png

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?

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
4 hours ago, Gabrielle said:

image.png.59bc6f8c2144efebb0c592cd04f16961.pngimage.png.91f0c87a065d2eecf734f2db1c48d86a.png

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.

 

Link to post
Share on other sites
  • 0
  • Solution

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%;
}
  
}

 

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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!!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...