Kaevon Zanjani asked 3 years ago
Hi, I am trying to change the width of the success message container. Currently, it is very long and I want it to be significantly shorter as it interferes with the graphic on my page.
Page Link: https://schallertenterprises.com/cutter-travel-calculator/ (ENTER VALUES: 23, 42, 2)
Please login or Register to submit your answer
replied 3 years ago
Is the computed graphic the success message or the Minimum Cutter message?
replied 3 years ago
The "minimum cutter: " is the success message.
replied 3 years ago
I would probably do it by modifying the css. I think its:
.with_frm_style .frm_message, .frm_success_style {
margin: 5px 0 15px;
border: 1px solid #D6E9C6;
border-color: var(--success-border-color);
background-color: #DFF0D8;
background-color: var(--success-bg-color);
color: #468847;
color: var(--success-text-color);
border-radius: 4px;
border-radius: var(--border-radius);
font-size: 14px;
font-size: var(--success-font-size);
}
That the default css (I think).
replied 3 years ago
Do I paste the css in the formidable css styling page or custom css?
replied 3 years ago
You can put it in either one, you just need to change that css to reflect how you want it to look.
replied 3 years ago
Ah ok I got it to work. One more quick question. When I hit submit/computer and the success message shows up, it moves my custom graphic down with it a little bit. Is there any way to prevent that?
replied 3 years ago
<p>Could be a padding or a margin issue. It’s hard to tell from my phone.</p>
replied 3 years ago
I don't see any padding properties though. and I removed the margin layout class and nothing happened.
replied 3 years ago
What i have noticed is the entire graphic moves as it draws, looks like its using CSS Flex, which it probably needs too. I am not sure you want to change it to anything other than flex, for mobility reasons.