0

I'm not a CSS developer or expert. I usually play around with inspect element to find the element. However, I'm sure something is totally wrong. For instant, when I use Inspector, in style section usually there is a

element{

}

I add whatever I want here and the CSS style will be applied. However, I know this is now the exact element, so I usually go to the next line and check if the one is CSS selector to find it. Sometimes I succeed and most of the time I just fail to find the exact element. I even tried to find the CSS selector in firefox, and still the same. Let me give you an example. Please look at the following link: LINK

There are two forms here which one of them is google form. What I'm trying to do, is to make google form to be exact the same as the left form. SO I started with deleting Attendance Title Block:

.freebirdFormviewerViewHeaderHeader{
display: none !important;
}

Even though it works in DevTool, it is not working when I add it to my additional CSS section of my site.

Then I tried to remove the footer section by:

.freebirdFormviewerViewFooterEmbeddedBackground {
    display: none;
}

and

.m2 .freebirdFormviewerViewNavigationPasswordWarning {
    display: none;
}

which the same happens. although works in DevTool , but doesn't have any effect on the form when I watch it in normal view.

For the button of course I have no idea how to change the class to follow the other buttons style (width mostly)

I will be so grateful someone helps me understand the process and let me know where I'm doing wrong.

Thanks in advance.

Majid
  • 421
  • 6
  • 19

1 Answers1

0

First of all, your example is an iframe, changing CSS on iframe is different, you can see the post How to apply CSS to iframe?
If you want to change CSS on your element, you should use the plus icon in the dev tool, it will show you the necessary classes to change (included the wrapped class of the element, not just element). For example, in your first example, it should be

.freebirdFormviewerViewHeaderHeader.exportHeader {
}

Not just the .freebirdFormviewerViewHeaderHeader. Sometimes you need to add !important to beat the CSS specificity.

Co Pham
  • 351
  • 2
  • 8